附加一個表單元素，直到按下逗號

Question

我有一個窗體，我在點擊事件上追加表單元素。我想將選項附加到下拉菜單（選擇選項），該選項是在用戶鍵入輸入時動態創建的。

用戶輸入作爲他類型使用以下方式的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(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 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>" 
     );     
    } 
}); 

Answer 3

希望這將有助於你

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