2

クリックイベントでフォーム要素を追加するフォームがあります。ユーザーが入力を入力すると動的に作成されるドロップダウン (オプションの選択) にオプションを追加したいと考えています。

ユーザー入力は、次の方法で keyup イベントを使用して入力すると、変数に保存されます。

$("#options_"+id).keyup(function(){

        var val_options = $('#options_'+id).val(); //user input is stored in the variable val_options

        var options = val_options.split(','); //input is exploded with a comma       

        var len = options.length;

            for(var i =0;i<len;i++)
            {                   

                var drop_options = "<option id='option_'"+i+">"+options[i]+"</option>";
                $("#select_"+id).append(drop_options);                  
            }

    });

動的に作成されたタグは、その特定の ID を持つタグに追加されます。

ここで私が直面している問題は、ユーザーが単一の文字を入力すると、ドロップダウン メニューのオプションとして追加されることです。ユーザーがコンマ (,) キーを押したときにのみ追加したい。

4

2 に答える 2

2

次のようなことを試してください：

$("#options_"+id).keyup(function(event){
    if (event.which !== 188) { // 188 is the keycode for ','
        return; // Do nothing.
    }

    var $this = $(this),
        val_options = $this.val(),
        options = val_options.split(','),
        $dropdown = $("#select_"+id);

    $dropdown.empty();

    for(var i =0;i<options.length-1;i++) {
        $dropdown.append(
            "<option id='option_'"+i+">"+options[i]+"</option>"
        );                  
    }
});
于 2012-06-29T12:24:07.810 に答える
2 
$("#options_" + id).keyup(function(e) {

    var val_options = $(this).val(); // getting input values
        options = val_options.split(','); // getting all values as array

    // checking for comma
    if (val_optons.indexOf(',') >= 0 ) {

        // if comma found then start append
        var options = val_options.split(',');
        var drop_options = ''; // take an empty string

        // looping over all values with
        // input fields separated by comma

        for (var i = 0; i < options.length; i++) {

            // making string of all options
            drop_options += "<option id='option_'" + i + ">" + options[i] + "</option>";
        }

        // append all option to select
        // here .html() will remove all previous
        // options and append newly 

        $("#select_" + id).html(drop_options);

    }
});

デモ

ループ内で呼び出す.append()とパフォーマンスが低下するため、回避するようにしてください。

于 2012-06-29T12:24:31.917 に答える