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

是的，这是可能的。您可以在下面的选择中附加选项。

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

OR

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

如果您对此选项感到满意，请勾选答案。

由于 SAMIR

Answer 2

当你点击按钮时，你需要附加一个从输入字段中获取值并将其发送到选项形式的select元素的函数。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

3 个答案: