Question

我有一个表单，我在click事件中附加表单元素。我想将选项附加到下拉（选择选项），这是在用户输入输入时动态创建的。

用户输入保存在变量中，因为他使用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的标签上。

我在这里遇到的问题是，当用户键入单个字符时，它会作为选项附加到下拉菜单中。我只想在用户按下逗号（，）键时追加它。

Answer 1

尝试这样的事情：

$("#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>"
        );                  
    }
});

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

    }
});

<强> DEMO

在循环内调用.append()导致性能降低，因此请尽量避免这种情况。

Answer 3

希望这会对你有所帮助

http://jsfiddle.net/lytican/AFe6v/

附加表单元素，直到按下逗号

3 个答案: