Question

此脚本生成一个下拉表单，我可以在其中选择可显示的下拉字段数。但是我有点坚持。我现在的问题是如何根据第二个下拉表单的值创建默认文本字段？例如，如果我选择'女士'它将产生两个文本字段，否则它将只有一个文本字段。

的jQuery

$(document).ready(function() {
    $('#bookinfo_adult').change(function() {
        var num = $('#bookinfo_adult').val();
        var i = 0;
        var html = '';
        for (i = 1; i <= num; i++) {
            html += '<br>' + i + '. <select name="gender4-' + i + '">' + '</' + 'option>' + '<option value=' + '"m">Mr. ' + '</option' + '>' + '<option value=' + '"f">' + 'Ms. ' + '</option' + '>' + '</select' + '></br>';
        }
        $('#list').html(html);
    });
});

HTML

<select id="bookinfo_adult" name="bookinfo_adult">
       <option value="0">- SELECT -</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
    </select>
<div id="list"></div>

Answer 1

不太确定你在问什么，但我想你想根据生成的select元素中的当前选择动态显示输入字段？

那怎么样？

<强> HTML：

<input type="text" id="bookinfo_adult">
<div id="list"></div>

<强> CSS：

#list input { display: none; }

<强> JS：

$(document).ready(function() {
    $('#bookinfo_adult').change(function() {
        var num = $('#bookinfo_adult').val(), i = 0, html = '';
        for (i = 1; i <= num; i++) {
            html += '<div>' + i + '. \
                         <select name="gender4-'+i+'"><option/><option value="m">Mr.</option><option value="f">Ms.</option><select> \
                         <input type="text" class="ms"> <input type="text" class="mr">\
                     </div>';
        }
        $('#list').html(html);
    });
    $(document).on("change", "#list select", function(){
        var parent = $(this).closest("div");
        switch ($(this).val()) {
            case "m": parent.find(".mr").show(); parent.find(".ms").hide(); break;
            case "f": parent.find("input").show(); break;
            default: parent.find("input").hide(); break;
        }
    });
});

我刚刚添加了两个文本字段（首先隐藏了CSS），并在div中将下拉列表的每一行“包裹”以便于选择。然后创建一个onchange处理程序，该处理程序适用于将来添加到DOM的所有元素（一旦您可以使用jQuery.live()，但从版本1.7开始不推荐使用它）。处理程序本身应该是不言自明的。 ;）

工作示例：http://jsfiddle.net/DfXEE/

两个文本字段下拉

1 个答案: