Setting default value of <select> element

Question

I have a table in my webpage that captures the details of a previous order history. The table has the following columns:

Order Date Review

Now, for the review, I want to have a select dropdown with some options. When user first launches the page, I want the previous rating to show up as default in the select dropdown. Here is what my code looks like:

tds.push( {
    content: '<select id="clientReview" name="clientReview" value=' + obj.get("client_review") + '>' +
    '<option value=1>Hate it!</option>' +
    '<option value=2>Don't love it but don't hate it.</option>' +
    '<option value=3>Fantastic!</option>' 
});

I was expecting that setting the value in select would set the default value in the dropdown but that's not happening. I still see the first value as default. Any idea how I can fix that?

Use DOM nodes in JavaScript, not strings (that's kinda what JavaScript was made to do). — Madara's Ghost
– Madara's Ghost, Commented Sep 23, 2012 at 19:13

Eugene Naydenov · Accepted Answer · 2012-09-23 19:22:51Z

4

What about setting of value after inserting of HTML to document?

HTML:

<select id="dropdown">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>
<input id="textField" type="text" value="2" />

JavaScript:

(function() {
    var dropdown$ = $('#dropdown'),
        textField$ = $('#textField');

    function changeVal() {
        var val = parseInt(textField$.val());
        if(!!val && val > 0 && val < 4) {
            dropdown$.val(val);
        }
    }

    textField$.on('keyup', changeVal);

    changeVal();
})();

DEMO

<option value="1" selected="selected">Text</option>

See:
http://www.w3.org/wiki/HTML/Elements/option#HTML_Attributes
http://www.w3schools.com/tags/att_option_selected.asp

Based on your code example I can assume that you'll use this HTML to insert somewhere later. In this case you can have something like next code:

tds.push( {
    content: '<select id="clientReview" name="clientReview" data-value="' + obj.get("client_review") + '">' +
    '<option value="1" >Hate it!</option>' +
    '<option value="2" >Don\'t love it but don\'t hate it.</option>' +
    '<option value="3" >Fantastic!</option>' +
    '</select>'
});

function insertDropdown(td$, dropdownHTML) {
    var dropdown$ = $(dropdownHTML);
    dropdown$.val(dropdown$.data('value'));
    td$.html(dropdown$);
}

for(var i = 0, l = tds.length; i < l; i++) {
    insertDropdown($('#td-' + i), tds[i].content);
}

DEMO

edited Sep 23, 2012 at 19:22

answered Sep 23, 2012 at 18:20

Eugene Naydenov

7,2953 gold badges28 silver badges44 bronze badges

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

4 Comments

Matt Over a year ago

In the future, please include all relevant code in your post and don't just include a link to jsFiddle. Your post should stand alone from any other resource; consider what'd happen if jsFiddle went down in the future!

comets Over a year ago

Thanks Matt and Evgeniy! I want to set the default at the same time I am adding the HTML to the document because my table can have a large number of rows and it seemed tedious to have to go through each row and change the defaults. I thought there was an elegant way of doing it. I will try to modify the solution above and see how that works out.

Madara's Ghost Over a year ago

w3schools is a wrong and misleading site. You shouldn't use it as reference for any sort of language. For PHP, there's the PHP Manual, for JavaScript, there's Mozilla Developer Network (or MDN). See w3fools.com to further understand why you should never use w3schools.

Eugene Naydenov Over a year ago

OK, thanks, Madara. I've added also a link to w3.org, but this is not changing an idea of particular answer anyway.

Collectives™ on Stack Overflow

Setting default value of <select> element

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related