SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    javascript / Jquery solution neede for select box

    I have a html select box.

    I have a option key in a javascript variable.


    I want to update html select box if the key matches to any of the options in the html select box. I need a javascript/jquery solution to do this.


    Example:
    -------------
    I have inputs as ...
    Input:

    HTML select box
    <select name="something" id="selectedCar">
    <option value="1">Volvo</option>
    <option value="2" selected="selected">Saab</option>
    <option value="3">Mercedes</option>
    <option value="4">Audi</option>
    </select>


    Javascript variable

    var selectKey="4";


    I want output as ..

    Output HTML

    <select name="something" id="selectedCar">
    <option value="1">Volvo</option>
    <option value="2">Saab</option>
    <option value="3">Mercedes</option>
    <option value="4" selected="selected">Audi</option>
    </select>


    I need a javascript / Jquery solution to achieve this . Do you have a solution to this problem ?

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by windowsxp View Post
    I need a javascript / Jquery solution to achieve this
    Something like this should do it.

    Code javascript:
    $('select[name="something"] option[value="' + selectKey + '"]').attr('selected', 'selected');
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Instead of name can I use id ?

    I am trying to do this ...

    $('select[id="selectedCar"] option[value="' + selectKey + '"]').attr('selected', 'selected');

    Does id selector work this way ? If not whats the correct syntax ?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by windowsxp View Post
    $('select[id="selectedCar"] option[value="' + selectKey + '"]').attr('selected', 'selected');

    Does id selector work this way ? If not whats the correct syntax ?
    $('#selectedCar')
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you mean this syntax...

    $('#selectedCar' option[value="' + selectKey + '"]').attr('selected', 'selected');

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by windowsxp View Post
    you mean this syntax...

    $('#selectedCar' option[value="' + selectKey + '"]').attr('selected', 'selected');
    Nearly, you have an additional single quote in there that's messing things up.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by windowsxp View Post
    you mean this syntax...

    $('#selectedCar' option[value="' + selectKey + '"]').attr('selected', 'selected');
    Nearly, you have an additional single quote in there that's messing things up.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess then ..

    $('#selectedCar option[value="' + selectKey + '"]').attr('selected', 'selected');

    Is this correct ?


    I like this actually though...

    $("#selectedCar option[value='" + selectKey + "']").attr('selected', 'selected');

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by windowsxp View Post
    I guess then ..

    $('#selectedCar option[value="' + selectKey + '"]').attr('selected', 'selected');

    Is this correct ?


    I like this actually though...

    $("#selectedCar option[value='" + selectKey + "']").attr('selected', 'selected');
    The difficulty with that second one is that it's mixing up what the quotes are used for. Double quotes are accepted use for HTML attribute values, whereas single quotes are the accepted ones to use in JavaScript for strings, to help reduce confusion between the two.

    Nothing's stopping you from using one or the other, but consistency goes a long way.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent. Thanks. You are very much helpful.

    I'll test this in the system . If I find anything wrong I'll get back to you.

  11. #11
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have tested in the system . It does not put selected attribute.

    Are you sure this code works ? Can we set attribute of option this way using jquery ?

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by windowsxp View Post
    Are you sure this code works ?
    Of course it does. Here's some sample code that demonstrates this for you.
    http://jsfiddle.net/pmw57/UGBqw/
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome. This works fine. You are very much helpful.

    Do you know html.
    Can you help with this html ?
    http://www.sitepoint.com/forums/show...33#post5101333


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •