e.g.I want to add 'selected' attribute at the third position. Can you explain if I can add selected attribute in append() of jquery.
for (i = 0; i < 10; i++)
{
if(i==3)
{
$('#mySelect').append($('<option>',
{
value: i,
text :i
}));
}
}
The issue is because of your nested if statement, which results in only the option with a value of 3 being appended to the select.
To fix this you can append all the option elements together, then set the val() of select to choose the specific one you want. Try this:
var html = [];
for (i = 0; i < 10; i++) {
html.push($('<option>', {
value: i,
text: i
}));
}
$('#mySelect').append(html).val(3);<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="mySelect"></select>Edit: Correct the answer as per Rory McCrossan's comment(added append() with jQuery object), and apologize for misleading.
The issue is about the if statement, your code would only append one <option> that is if i equals 3.
According to the documentation, you have several options to do so...
1) Use append() with jQuery object
for (var i = 0; i < 10; i++) {
$('#mySelect').append($('<option>', {
value: i,
text: i,
selected: i == 3 ? true : false
}))
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="" id="mySelect"></select>2) Use appendTo()
for (var i = 0; i < 10; i++) {
$('<option>', {
value: i,
text: i,
selected: i == 3 ? true : false
}).appendTo($('#mySelect'))
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="" id="mySelect"></select>3) Use append() with a method
for (var i = 0; i < 10; i++) {
$('#mySelect').append(CreateOption(i))
}
function CreateOption(i) {
return $('<option>', {
value: i,
text: i,
selected: i == 3 ? true : false
})
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="" id="mySelect"></select>4) Use append() with text
for (var i = 0; i < 10; i++) {
var selected = i==3 ? ' selected=true' : ''
var option = '<option value='+ i + selected + '>' + i + '</option>'
$('#mySelect').append(option)
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="" id="mySelect"></select>
So you can't append an element like that Yes you can. The documentation even says so, but you conveniently missed out that part. Content: DOM element, text node, array of elements and text nodes, HTML string, or **jQuery object** to insert. Your second method is event doing this, just in a more obfuscated manner. In fact, I'm not sure how this is an accepted answer as what the OP has already works. This is just a regurgitation of the documentation. Please consider the accuracy of your answers before potentially mis-leading new visitors.