javascript - 重置下拉列表中未选择字段的值

Question

I have a dropbox that when selected it displays its respective fields

in first image you can see there is A person without an ID so when selected it displays something like:

如果你看到我加了 12

现在，如果我改变主意并选择另一个选项（有 ID 的人），一个字段将显示如下：

我加了9999

没关系，但是现在如果我再次改变主意并返回到其他选定的选项，值仍然存在，例如：

我想清理它们……我怎样才能做到这一点？

再次填写所有各个字段都没有关系，如果选择没有 ID 的人，我想在这种情况下重置值，删除 9999，另一方面，如果我选择有 ID 的人，我想重置 vakue 12

请看看我的小提琴

一些jquery代码是：

//function available 
function validate(id, msg) {
    var obj = $('#' + id);
    if(obj.val() == '0' || obj.val() == ''){
        $("#" + id + "_field_box .form-error").html(msg)
        return true;
    }
    return false;
}

$(function () {
    $('#has_id').show();
    $('#select_person').change(function () {
        $('.persons').hide();
        if ($('#select_person').val() == 'typeA') {
            $("#has_id").html('');
            $("<option/>").val('0').text('--Choose Type A--').appendTo("#has_id");
            $("<option/>").val('person-A-withID').text('person-A-withID').appendTo("#has_id");
            $("<option/>").val('person-A-withoutID').text('person-A-withoutID').appendTo("#has_id");
        }

        if ($('#select_person').val() == 'typeB') {
            $("#has_id").html('');
            $("<option/>").val('0').text('--Choose Type B--').appendTo("#has_id");
            $("<option/>").val('person-B-withID').text('person-B-withID').appendTo("#has_id");
            $("<option/>").val('person-B-withoutID').text('person-B-withoutID').appendTo("#has_id");
        }


    });

    $('#has_id').change(function () {
        $('.persons').hide();
        $('#' + $(this).val()).show();
    });

});







var validation = function(){
            var err = 0;
            err += validate('select_person', "select person.");
            err += validate('has_id', "Select whether it has an ID or not.");   

            if(err == 0){
               alert('continue');
            }else{
                alert('error');
            }

        };

Answer 1

只需进行此更改：

$('#has_id').change(function () {
    $('.persons input').val('');
    $('.persons').hide();
    $('#' + $(this).val()).show();
});

新小提琴：http: //jsfiddle.net/6m27M/

每当对#has_id 下拉列表进行更改时，这只会清除所有值。