CODEWITHSUNDEEP
javascriptjqueryhtmlhtml-select
Tcl_newbie
Tcl_newbie

Reputation: 135

Fill in a select box automatically with the value same as user input

I'm trying to fill a select list with the values entered in an input text box when the user clicks on a button. For eg:

HTML:

<form>
                <h2>Add EVENT/MARKET/SELECTION ID </h2>
                <select id="id_type">
                        <option value="sEVENT">Event</option>
                        <option value="sEVMKT">Market</option>
                        <option value="sSELCN">Selection</option>
                 </select>

                <input id="entered_id" type="number"/>

              <button id="add_id" onclick="populateList()">Add</button>
</form>
<form>
                <h2>Entered IDs</h2>
                <select id="list_id" size="10" multiple="true"></select>

</form>

JS:

function populateList() {
        var events_id   = document.getElementById('entered_id').value;  
/*I want this events_id to be entered to the select list "list_id"*/
}

I tried $("#list_id").append(events_id) but that didn't work. Any help is appreciated. Thanks

Upvotes: 0

Views: 1834

Answers (4)

collab-with-tushar-raj
collab-with-tushar-raj

Reputation: 1287

Try FIDDLE

 $("#add_id").click(function () {
      var value = $("#entered_id").val();    
      $("#list_id").append("<option value =" + value + " >" + value + "</option>");
 });

Upvotes: 1

Spokey
Spokey

Reputation: 10994

Doing everything the jQuery way you can bind a click handler to the button instead of the inline method.

$('#add_id').click(function() {
  $('<option/>', { text: this.value }).appendTo('#list_id');
});

Upvotes: 0

Nishad K Ahamed
Nishad K Ahamed

Reputation: 1394

using JavaScript

var option = document.createElement("option");
option.text = document.getElementById('entered_id').value;  
option.value = document.getElementById('entered_id').value;  
var select = document.getElementById("list_id");
select.appendChild(option);

Upvotes: 0

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100175

since its <select> you need to append <option> tag, as:

$("#list_id").append("<option value='"+events_id+"'>"+events_id+"</option>");

Upvotes: 3

Related Questions