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

Question

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

Sudhir Bastakoti · Accepted Answer · 2014-10-14 10:44:32Z

3

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

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

answered Oct 14, 2014 at 10:44

Sudhir Bastakoti

100k15 gold badges163 silver badges169 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tcl_newbie Over a year ago

For some reason, the value appears in the select list for a fraction of a second and then disappears. I shall debug it. In the meantime, if you know what could be wrong, please let me know.

Tcl_newbie Over a year ago

Well, it was because my select lists were enclosed in "form"s. It worked fine when I removed the form tag. But what if I want to have it in a form tag??

collab-with-tushar-raj · Accepted Answer · 2014-10-14 10:54:08Z

1

Try FIDDLE

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

answered Oct 14, 2014 at 10:54

collab-with-tushar-raj

1,31211 silver badges22 bronze badges

Comments

Nishad K Ahamed · Accepted Answer · 2014-10-14 10:46:24Z

0

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

answered Oct 14, 2014 at 10:46

Nishad K Ahamed

1,39415 silver badges25 bronze badges

Comments

Spokey · Accepted Answer · 2014-10-14 10:51:24Z

0

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

answered Oct 14, 2014 at 10:51

Spokey

11k2 gold badges31 silver badges44 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related