javascript - How to insert values in textbox to select option - Stack Overflow

admin管理员组

文章数量:1291122

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

Hi friends here i want to add value from text box to select option using jquery, i got the value from textbox but don't know how to insert, help me.

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

Hi friends here i want to add value from text box to select option using jquery, i got the value from textbox but don't know how to insert, help me.

• javascript
• jquery
• html
• css
• jquery-ui

Share Improve this question Follow edited Jul 10, 2014 at 6:12 Suresh Ponnukalai 14k55 gold badges3535 silver badges5454 bronze badges asked Jul 10, 2014 at 6:05 SMKSMK 6522 silver badges77 bronze badges 1

• jsfiddle/arunpjohny/hj5u8/1 – Arun P Johny Commented Jul 10, 2014 at 6:11

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 5

you can do like this:

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

Use append

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

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

DEMO

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

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

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

Try this:

$(".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");
});

See DEMO here.

Hope this will help

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

本文标签： javascriptHow to insert values in textbox to select optionStack Overflow