Select the option dynamically using Jquery

Question

I am designing a dynamic HTML for Select Option like below:

item += "<td class='ddl' style='width:40%;'>";
item += "<select>"
item += " <option id='list' name='selector' value=" + select + ">" + select + "</option>";
for (var l = 0; l < array.length; l++) {
    item += " <option class='ddl' value=" + array[l] + ">" + array[l] + "</option>";
}
item += "</select>";
if ("One"!= '') {
    $('#list').val("One");                      
}
item += "</td>";

The above code creates a dynamic HTML like below:

<select disabled="">
<option select="" value="Please" name="selector" id="list">Please Select</option>
<option value="One" class="ddl">One</option> 
<option value="Two" class="ddl">Two</option>
</select>

I want to set the value of the Select to "One" dynamically.

NOTE: The code is not inside document.ready, as I cant keep the code inside ready(). Might be I am assigning the value to the Select before it is revdered on the page. Please suggest me.

OP: You need to append the "item" to the page - before trying to select option — Taleeb, Apr 02 '14 at 08:21
And even if your `if` wasn’t nonsense – `list` is the id of your first `option` element, so `$('#list').val("One")` would only set the value of that option element. — CBroe, Apr 02 '14 at 08:26

Taleeb · Answer 1 · 2014-04-02T09:00:52.117

0

You need to call the javaScript to select the value after the dropdown(select) is added to the page. For example if the html is

<div id="myContainer" />

Then the javascript should be like

var item = "";
//Insert your code to create item
item +="<select id='mySelect'>";
item +='<option select="" value="Please" name="selector" id="list">Please   Select</option>';
item +='<option value="One" class="ddl">One</option> ';
item +='<option value="Two" class="ddl">Two</option>';
item +='</select>';

$('#myContainer').append(item); //Add to html

//Now the id "mySelect" is available
$('#mySelect').val('One')

I've added a jsFiddle to demonstrate this at http://jsfiddle.net/taleebanwar/n9vCb/

edited Apr 02 '14 at 09:00

answered Apr 02 '14 at 08:53

Taleeb

1,888
18
25

@Jean-Paul. Can you provide specifics of what did not work. Also please refer the jsFiddle. – Taleeb Apr 02 '14 at 09:27
That is because I added "disabled" to the select. I did this because the html in original post had disabled added. – Taleeb Apr 02 '14 at 09:33
Ah, that explains it. I'll remove my comment :) – Jean-Paul Apr 02 '14 at 09:34

score 0 · Answer 2 · answered Apr 02 '14 at 09:04

0

You could also set a selected attribute on the corresponding option tag as you create the select dynamically.

answered Apr 02 '14 at 09:04

fray88

820
1
7
23

score 0 · Answer 3 · edited May 23 '17 at 12:05

If you are using jQuery then why don't you utilize the library for creating the select, for example, using something like this (Example):

var numbers = ['one', 'two', 'three', 'four', 'five'];
var select = $('<select/>', {id:'list', name:'selector'});
$.each(numbers, function(key, value) {
    var text = value[0].toUpperCase() + value.substr(1);
    var option = $("<option/>", { class:'ddl', value: value, text: text });
    select.append(option);
});
select.val('two').appendTo('body');

I've appended the select into body but you may append it into a td and you can achieve it, give it a try, create the td same way and insert the select in the td and then insert the td in the table. Also you may check this answer.

Select the option dynamically using Jquery

3 Answers3