javascript - 根据组合框jquery中的动态值显示或隐藏div

我有一个名为select_person = {typeA，typeB}的组合框。

选择一个选项后，我要显示其他组合框has_id = {has_id，has_no_id}

现在取决于在typeA或typeB中选择的值，并取决于has_id或has_no_id我想显示（或保持隐藏）相应的div。

因此，如果注册表碰巧有一个ID并且是typeA，我将仅显示一个输入字段，但是如果是typeA而没有ID，则我将显示3个输入字段，与typeB相同。

为此，我正在做类似的事情：

$(function () {
    $('#select_person').change(function () {
        $('#has_id').show();
        if ($('#select_person').val() == 'typeA') {
            $("#has_id").append("<option>" + $("#typeA_has_id").val() + "</option>");
            $("#has_id").append("<option>" + $("#typeA_has_no_id").val() + "</option>");
        }

        if ($('#select_person').val() == 'typeB') {
            $("#has_id").append("<option>" + $("#typeB_has_id").val() + "</option>");
            $("#has_id").append("<option>" + $("#typeB_has_no_id").val() + "</option>");
        }


    });
});


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

    });
});

和html

<Select id="select_person">
    <option value="0">Select person</option>
    <option value="typeA">typeA</option>
    <option value="typeB">typeB</option>
</Select>

<Select id="has_id" style="display:none"></Select>

<div id="person1" class="persons" style="display:none">
    <div class="form-left">Type A has id *</div>
    <input type="text" id="name" name="name" class="form-input"
    />
</div>
<div id="person1" class="persons" style="display:none">
    <div class="form-left">Type A has No id *</div>
    <input type="text" id="id" name="id" class="form-input"
    />
    <input type="text" id="name" name="name" class="form-input"
    />
    <input type="text" id="address" name="address" class="form-input"
    />
</div>

<div id="person2" class="persons" style="display:none">
    <div class="form-left">Type B has id *</div>
    <input type="text" id="nameB" name="nameB" class="form-input"
    />
</div>
<div id="person2" class="persons" style="display:none">
    <div class="form-left">Type B has No id *</div>
    <input type="text" id="idB" name="idB" class="form-input"
    />
    <input type="text" id="nameB" name="nameB" class="form-input"
    />
    <input type="text" id="addressB" name="addressB" class="form-input"
    />
</div>

但是没有用，你能帮我吗？ here is the jsfiddle

最佳答案

查看代码和html标记中发生了什么：


Your markup is invalid，因为它在同一页面上used same ids for multiple elements。
还不清楚您将如何确定将值放入$("#typeA_has_id").val()中。
就像其他答案中所述，您在结尾处还有});个额外的结局。


如果要在option的$('#has_id')列表中放入一些值，则可以尝试使用此值。

$("<option/>").val('a').text('a').appendTo("#has_id");

尽管如果您想看一下，我已经做了一些事情：

FIDDLE

更改了html：

<div id="person-A-withID" class="persons" style="display:none"></div>
<div id="person-A-withoutID" class="persons" style="display:none"></div>
<div id="person-B-withID" class="persons" style="display:none"></div>
<div id="person-B-withoutID" class="persons" style="display:none"></div>

jQuery的：

$(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();
  });
});