0

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

但不工作，你能帮帮我吗？这是jsfiddle

4

3 回答 3

2

你});在文件的末尾有额外的......

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

根据您的评论更新

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

在这里摆弄

于 2013-03-08T07:17:18.300 回答
1

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

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

$(function () {
    $('#has_id').change(function () {
        $('.persons').hide();
                $('#' + $(this).val()).show();
            });
于 2013-03-08T07:19:26.153 回答
1

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

  1. Your markup is invalid因为它used same ids for multiple elements在同一页上。
  2. 它也不清楚您将如何确定将值放入$("#typeA_has_id").val().
  3. 正如其他答案中提到的那样，您最后还有一个});额外的结束。

如果您想在您的option列表中添加一些值，$('#has_id')那么您可以尝试使用这个。

$("<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();
  });
});
于 2013-03-08T07:56:31.427 回答