0

このスクリプトは、表示できるドロップダウン フィールドの数を選択できるドロップダウン フォームを生成します。しかし、私はそれに固執しています。私の問題は、2番目のドロップダウンフォームの値に基づいてデフォルトのテキストフィールドを作成する方法ですか? たとえば、「Ms.」を選択するとします。2 つのテキスト フィールドが生成されます。それ以外の場合は、1 つのテキスト フィールドになります。

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;
        }
    });
});

2 つのテキスト フィールド (最初は CSS で非表示) を追加し、ドロップダウンのすべての「行」をdiv選択しやすいようにラップしました。次に、onchange将来 DOM に追加されるすべての要素に対して機能するハンドラーが作成されます (一度使用できるようjQuery.live()になりましたが、バージョン 1.7 では廃止されています)。ハンドラー自体は一目瞭然です。;)

作業例: http://jsfiddle.net/DfXEE/

于 2012-08-10T01:20:20.720 に答える