0

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

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>
4

1 回答 1

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/

于 2012-08-10T01:20:20.720 回答