如何在文本框中插入值以选择选项答案

【问题标题】：How to insert values in textbox to select option如何在文本框中插入值以选择选项
【发布时间】：2014-07-10 06:05:47
【问题描述】：

HTML

<input type="text" value="" id="ip1" class="ip1" />
<input type="button" value="Add" class="bt1" id="bt1">    
</br>          
<select>
 <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
</select>

JQUERY

 $(document).ready(function(e) {
   $(".bt1").click(function(){
     var opt = $("#ip1").val();
   });
 });

嗨朋友们，我想从文本框中添加值以使用 jquery 选择选项，我从文本框中得到了值，但不知道如何插入，帮帮我。

【问题讨论】：

jsfiddle.net/arunpjohny/hj5u8/1

标签： javascript jquery html css jquery-ui

【解决方案1】：

你可以这样做：

HTML：

         <select id="List">
           <option value="volvo">Volvo</option>
           <option value="saab">Saab</option>
         </select>

JQUERY：

         $(".bt1").click(function(){

         var opt = $("#ip1").val();

          $('#List')
         .append($("<option></option>")
         .attr("value",opt )
         .text(opt));
         });

FIDDLE DEMO

【讨论】：

【解决方案2】：

使用append

$(document).ready(function(e) {
    $(".bt1").click(function(){
        var opt = $("#ip1").val();
        $("select").append('<option value="' + opt+ '">' + opt +'</option>')
    });
});

【讨论】：

【解决方案3】：

$(document).ready(function (e) {
    $(".bt1").click(function () {
        var opt = $("#ip1").val();
        $('select').append(' <option value="' + opt + '">' + opt + '</option>')
    });
});

DEMO

【讨论】：

【解决方案4】：

$(".bt1").on('click',function () {
    var optionval= $("#ip1").val();
    $('select').append(' <option value="' + opt + '">' + opt + '</option>')
});

【讨论】：

【解决方案5】：

  $(document).ready(function(e) {
             $("select").change(function(){

    var opt = $("#ip1").val();
             });
            });

【讨论】：

OP 不想在选择框更改时读取文本框值。请再次阅读问题。

【解决方案6】：

试试这个：

$(".bt1").click(function () {
    var opt = $("#ip1").val();
    //check if option already exists in the drop down
    if (!$("select").find("option[value='" + opt + "']").length) {
        //add option to the drop down
        $("select").append("<option value='" + opt + "'>" + opt + "</option>");
    }
    //select entered option
    $("select").find("option[value='" + opt + "']").attr("selected", "selected");
});

在此处查看DEMO。

【讨论】：

【解决方案7】：

希望对你有帮助

$(document).ready(function (e) {
    var $txtVal = $('#ip1');
    $(".bt1").click(function () {
        var opt = $("#ip1").val();
        if($txtVal.val()){
        $('<option />', { text: $txtVal.val(),value: $txtVal.val()}).appendTo('select');
        }
    });
    });

FIDDLE HERE >>

【讨论】：