如何將文本字段添加到多列表 - jQuery？

Question

我想獲取用戶輸入的值並將它們添加到列表中。我需要檢查我的清單，看它是否先存在。我在第一步失敗，我該如何將值添加到列表中？

這是我的代碼：

HTML：

<form action=""> 
    <div class="device_item"> 
     <label for="dev_name">Device Name</label> 
     <input id="dev_name" type="text"> 
    </div> 
    <div class="device_item"> 
     <label for="dev_name">Device Type</label> 
     <input id="dev_type" type="text"> 
    </div> 
    <div class="device_item"> 
     <label for="dev_os">Device OS</label> 
     <input id="dev_os" type="text"> 
    </div> 
    <div class="device_item"> 
     <div class="device_info"> 
      <div class="device_info_header"> 
       <label>Device Information Header</label> 
       <div> 
        <select multiple="multiple" id="lstBox1" name="device_info_header"> 
         <option value="net_info">Network Info</option> 
         <option value="os_info">OS Info</option> 
         <option value="drive_info">Drive Info</option> 
         <option value="time_dif">Time Difference Info</option> 
        </select> 
       </div> 
       <div id="arrows"> 
        <input type='button' class="delete" value=' < ' /> 
        <input type='button' class='add' value=' > ' /> 
       </div> 
       <div> 
        <select multiple="multiple" id="lstBox2" name="device_info_header"></select> 
       </div> 
       <input type="text" name="other_info" id="dev_info_other_text" style="display:none;"> 
       <div class="clear_both" /> 
       <div class="other_ops">Other: 
        <input id="other_field" type="text" /> 
        <input type="button" class="add2" value=' > ' /> 
       </div> 
       <br> 
       <br>NEXT BUTTON (creates headers or dictionary keys) TAKES YOU TO: 
       <br> 
       <br>TITLE (eg. Net Info, or OS Info) 
       <br>Key: 
       <input type="text"> 
       <br>Value: 
       <input type="text"> 
       <br>Add more button 
       <br> 
       <br>next button (loop through the headers/keys). 
       <br> 
       <br>finally, a submit button</div> 
     </div> 
    </div> 
</form> 

JS

$(document).ready(function() { 

    $('.add').click(function (e) { 
     var selectedOpts = $('#lstBox1 option:selected'); 
     if (selectedOpts.length == 0) { 
      alert("Nothing to move."); 
      e.preventDefault(); 
     } 

     $('#lstBox2').append($(selectedOpts).clone()); 
     e.preventDefault(); 
    }); 

    $('.delete').click(function (e) { 
     var selectedOpts = $('#lstBox2 option:selected'); 
     if (selectedOpts.length == 0) { 
      alert("Nothing to move."); 
      e.preventDefault(); 
     } 

     $(selectedOpts).remove(); 
     e.preventDefault(); 
    }); 
    $('.add2').click(function (e) { 
     var other_field_str = $('#other_field').val(); 
     alert(other_field_str); 
     $('#lstBox2').append(other_field_str); 
     e.preventDefault(); 
    }); 
}); 

我也有這個小提琴代碼：http://jsfiddle.net/jdell64/8qsda/1/

與完整的解決方案已更新FIDDLE： http://jsfiddle.net/jdell64/8qsda/

Answer 1

您需要創建一個<option>元素，其中包含Other輸入。

$('.add2').click(function (e) { 
     var other_field_str = $('#other_field').val(); 
     alert(other_field_str); 
     var other_field = $('<option>', { 
      value: other_field_str, 
      text: other_field_str 
     }); 
     $('#lstBox2').append(other_field); 
     e.preventDefault(); 
    }); 

FIDDLE