两个下拉列表中的文本字段

text field within two drop down

本文关键字：文本 字段 下拉列表 两个      更新时间：2023-09-26

此脚本生成一个下拉表单，我可以在其中选择可以显示的下拉字段数。但是我有点坚持这一点。我现在的问题是如何使默认文本字段基于第二个下拉表单的值？例如，如果我选择"Ms."，它将生成两个文本字段，否则它将只有一个文本字段。

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>

不太确定你在问什么，但我想你想根据生成的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/

相关文章：