显示或隐藏div取决于动态值的组合框jquery

Question

我有一个名为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>

但是不工作，你能帮我吗?这里是jsfield

Answer 1

您在文档末尾有额外的});…

您有两个相同名称的id person1 ..这是无效的HTML标记…要么删除它…，然后使用classes

从你的评论中更新

我已经创建了这个例子小提琴…阅读你的评论不确定这是否是你想要的…但我相信这将使你开始

这里的

小提琴

Answer 2

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

1. Your markup is invalid与used same ids for multiple elements在同一页。
2. 也不清楚你如何决定在$("#typeA_has_id").val()中放置值。
3. ，最后你有一个});额外的关闭，正如其他答案所提到的。

，如果你想在$('#has_id')的option列表中放一些值，那么你可以试试这个。

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

虽然我已经做了一些事情，如果你想看:

小提琴

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

Answer 3

一个小错误:});额外的

http://jsfiddle.net/LEfbX/1/

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