动态选择框如何从我的文本框值动态添加选项框中的选项

时间:2016-09-21 07:02:33

标签: jquery html

我是这类功能的新手,我如何检索文本框值,并且点击添加按钮后,每个值附加到旁边的选择框选项任何一个请给我一个建议来修复它。

$(document).ready(function(){
var val = $('#txt-val').val();
var selectval = $('#newval').val();
  $('#addbtn').click(function(){
  //who to retrive textbox value and append as a option value of select box .
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" style="width:150px;" id="txt-val" />
<button id="addbtn">Add</button>
<select id="newval" style="width:150px;">
<option></option>
</select>

1 个答案:

答案 0 :(得分:3)

只需添加一行代码

.append()方法中使用.click()

$(document).ready(function(){
  $('#addbtn').click(function(){
    var val = $.trim($('#txt-val').val());
    if(val != '')
      $('#newval').append('<option>' + val +'</option>');
    $('#txt-val').val('');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" style="width:150px;" id="txt-val" />
<button id="addbtn">Add</button>
<select id="newval" style="width:150px;">
</select>