jquery - 动态选择框如何从我的文本框值动态地将选项添加到选择框

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

最佳答案

只需添加一行代码

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

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

关于jquery - 动态选择框如何从我的文本框值动态地将选项添加到选择框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39609546/

相关文章:

html - 自适应 2 列布局

jquery - Bootstrap 3.0.0 模态事件未触发

javascript - 将索引列添加到数据表

javascript - 如何撤销 .click(false)

html - 内容部分在滚动条上显示额外的白色间距

html - 只有 Margin-top 有效但不是 top

html - Firefox 中列表元素内联元素内 block 元素的行为

html - div 中的背景未在 Bootstrap 中调整大小

javascript - $(*[attr]) 和 $([attr]) 之间的区别

javascript - 如何使我的 div 算作背景 slider 并且不制作大的水平滚动条