在下拉列表中插入值。可能嗎？

Question

我想問是否可以使用輸入文本在下拉列表中添加值？這是下拉列表的代碼。如何編碼？

<select class="form-control" name="txt_university"> 
        <option></option> 
         <option>University of Malaya</option> 
         <option>Universiti Sains Malaysia</option> 
         <option>Universiti Teknologi Malaysia</option> 
         <option>Universiti Teknologi MARA</option> 
         <option>Universiti Putra Malaysia</option> 
         <option>Universiti Kebangsaan Malaysia</option> 
         <option>Universiti Malaysia Sabah</option> 
         <option>Universiti Tenaga Nasional</option> 
         <option>Multimedia University</option> 
         </select> 

這是用戶插入另一所大學的代碼。當用戶插入大學時，它將存儲在下拉列表中。

<div class="control-group"> 
         <label class="control-label">Add University</label> 
         <div class="controls"> 
         <input name="txt_university" type="text" class="input-xxlarge"/> name="save">Add</button> 
         </div> 
        </div> 

Answer 1

你需要附上，將採取從輸入字段的值，並將其發送按鈕被點擊時，在選項的形式，選擇元素的功能。

var button = document.getElementById('button'); 
 

 
button.addEventListener('click', function() { 
 
    
 

 
var newUniversity = document.getElementById("new_university").value; 
 
var universityList = document.getElementById("university_list"); 
 

 
universityList.options[universityList.options.length] = new Option(newUniversity, newUniversity); 
 

 
});

<select id="university_list" class="form-control" name="txt_university"> 
 
        <option></option> 
 
         <option>University of Malaya</option> 
 
         <option>Universiti Sains Malaysia</option> 
 
         <option>Universiti Teknologi Malaysia</option> 
 
         <option>Universiti Teknologi MARA</option> 
 
         <option>Universiti Putra Malaysia</option> 
 
         <option>Universiti Kebangsaan Malaysia</option> 
 
         <option>Universiti Malaysia Sabah</option> 
 
         <option>Universiti Tenaga Nasional</option> 
 
         <option>Multimedia University</option> 
 
         </select> 
 
         
 
         <div class="control-group"> 
 
    <label class="control-label">Add University</label> 
 
    <div class="controls"> 
 
     <input id="new_university" name="txt_university" type="text" class="input-xxlarge"/> 
 
     <button name="save" id="button" type="button">Add</button> 
 
    </div> 
 
</div>

Answer 2

是的，這是可能的。您可以在下面的選擇中追加選項。

$('select').append($('<option>', {text:'University Name'})); 

OR

$('select').append('<option>University Name</option>'); 

請勾出答案，如果您滿意這個選項。

感謝 SAMIR

Answer 3

與附加檢查重複的選項。

$('#add').click(function() 
 
{ 
 
    if($('#new_univ').val() !="") 
 
    {  
 
     var valid =true; 
 
     $('select[name="txt_university"]>option').each(function() 
 
     { 
 
     //alert($(this).text()); 
 
      if($(this).text().trim()==$('#new_univ').val().trim()) 
 
      { 
 
      valid =false; 
 
      } 
 
     }); 
 
     
 
     if(valid==true) 
 
     { 
 
     $('select[name="txt_university"]').append('<option>'+$('#new_univ').val()+'</option>'); 
 
\t \t 
 
\t \t alert("not a duplicate and option added successfully "); 
 

 
     } 
 
     else 
 
     { 
 
     alert("duplicate"); 
 
     } 
 
     
 
    } 
 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="form-control" name="txt_university"> 
 
        <option></option> 
 
         <option>University of Malaya</option> 
 
         <option>Universiti Sains Malaysia</option> 
 
         <option>Universiti Teknologi Malaysia</option> 
 
         <option>Universiti Teknologi MARA</option> 
 
         <option>Universiti Putra Malaysia</option> 
 
         <option>Universiti Kebangsaan Malaysia</option> 
 
         <option>Universiti Malaysia Sabah</option> 
 
         <option>Universiti Tenaga Nasional</option> 
 
         <option>Multimedia University</option> 
 
         </select> 
 
<div class="control-group"> 
 
         <label class="control-label">Add University</label> 
 
         <div class="controls"> 
 
         <input name="txt_university" type="text" class="input-xxlarge" name="new_univ" id="new_univ" /> 
 
         <input type="button" id="add" name="save" value="Add"> 
 
         </div> 
 
        </div>