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>

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

Answer 1

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

你有两个同名person1的ID ..这是无效的HTML标记..要么删除它......要么使用类

您的评论中

已更新

我创建了这个例子小提琴..读你的评论不确定这是不是你想要的......但我相信这会让你开始

fiddle here

Answer 2

一个小错误：}）;额外

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

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

Answer 3

查看代码和html标记中发生的事情：

Your markup is invalid，因为used same ids for multiple elements位于同一页面上。
还不清楚如何确定如何将值放入$("#typeA_has_id").val()。
并且你在其他答案中也提到了});额外结束。

如果您想在option的{{1}}列表中添加一些值，那么您可以尝试使用此值。

$('#has_id')

虽然我想做的事情如果你想看到：

FIDDLE

更改了html：

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

jQuery的：

<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中的动态值显示或隐藏div

3 个答案:

FIDDLE

更改了html：

jQuery的：