CODEWITHSUNDEEP
javascripthtml
comets
comets

Reputation: 33

Setting default value of <select> element

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?

Upvotes: 3

Views: 5281

Answers (1)

Eugene Naydenov
Eugene Naydenov

Reputation: 7295

  1. 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

  2. <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

  3. 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

Upvotes: 4

Related Questions