-1

ユーザーが HTML 選択ドロップダウンに独自のオプションを追加できるようにしたいと考えています。値を取り、選択メニューの下に「オプション」を作成する部分を除いて、ほとんどのコードを記述しました。

HTML

<li id="add_1_parent">
    <div>
        <select width="100" class="add_select add_referral">
            <option value="">Incorporation</option>
            <option value="">Corporation</option>
            <option value="">Limited Liability Corporation</option>
            <option value="">Sole Proprietor</option>
        </select>
        <a href="#" id="add_1_child">Add</a>
    </div>    
</li>

JS

$(document).ready(function() {
    $('#add_1_child').click(function() {
        $('#add_1_parent').append('<input id="add_1_foster_add" class="add_input" type="text" size="50" class="" value="" maxlength="255"/><a href="#" id="add_1_foster_child">Add</a>');
    });
    $('#add_1_foster').click(function() {
        // Add the value to the select HTML here..?
    });
});

http://jsfiddle.net/HWRWv/

ボタンをクリックする"Add"と、テキスト ボックスが表示される必要があります。

で定義されている 2 番目の追加をクリックすると"add_1_foster_child"、 から値を取得する必要がありinput、それをメニューの<option>下の に変更しselectます。

どうすればよいかわからないのは、から値を取得してメニューinputに入れることです。select

4

2 に答える 2

4

.append()関数を使用して目的の HTML の文字列を作成するだけで、項目を追加できます。jQuery に追加してもらいます。

var option_value = 42;
var option_text = "Meaning to life the Universe and Everything";
$('#select_id').append('<option value="'+option_value+'">'+option_text+'</option>');

コメントに記載されているように、ユーザーがサイトのレイアウトを損なう可能性のあるエントリを追加しないように、予防措置を講じる必要があります。たとえば、誰かが実際の HTML コードを入力した場合などです。その洞察をありがとう@Jason 。

于 2012-07-27T22:29:26.993 に答える
0

これがあなたが求めているものだと思います：

$(document).ready(function() {
    $('#add_1_child').on('click', function() {
        var html = '<div class="add_container"><input class="add_input" type="text" size="50" maxlength="255"/><a href="#" class="add_link">Add</a></div>';
        $('#add_1_parent').append(html);
    });

    $('#add_1_parent').on('click', '.add_link',function() {
        var option = $('<option value="">'+$(this).prev('.add_input').val()+'</option>');
        $('.add_select').append(option);
        $('.add_container').remove(); //removes the add input after submission, optional ?
    });
});​

フィドル

于 2012-07-27T22:53:54.940 に答える