Jquery to preselect a dropdown value

Question

I have this dropdown below which I have taken out of the actual page I need to work on at http://www.howtoclone.co.uk.gridhosted.co.uk/plasmid-builder where I pass the product ID value from another page to the jquery below to preselect the dropdown 'value'. When I just run this below in isolation it works.

<select name="0product_id[]" class="groupSelect" id="groupsel_0" onchange="productbuilder.update(this.value,0);">
    <option value="0" class="notag" id="id0_0">--Select--</option>
    <option class="notag" value="338" id="id0_338"  >Dual Promoter Puromycin Expression Plasmid - pSF-CMV-PGK-Puro  > £114.00</option>
    <option class="notag" value="282" id="id0_282"  >EMCV IRES Puromycin Expression Plasmid - pSF-CMV-EMCV-Puro  > £114.00</option>
    <option class="notag" value="265" id="id0_265"  >FMDV IRES Puromycin Expression Plasmid - pSF-CMV-FMDV-Puro  > £114.00</option>
    <option class="notag" value="101" id="id0_101"  >Puromycin Selection Plasmid - pSF-CMV-Ub-Puro AscI  > £114.00</option>
    <option class="notag" value="105" id="id0_105"  >Puromycin Selection SV40 Ori Plasmid - pSF-CMV-Ub-Puro-SV40 Ori SbfI  > £114.00</option>
    <option class="notag" value="323" id="id0_323"  >Rous Sarcoma Virus Promoter Puromycin Expression Plasmid - pSF-CMV-RSV-Puro  > £114.00</option>
</select>

and This is the snippet which works to change the value on load:

<script>    
    $( document ).ready(function() {
    $("#groupsel_0 option[value=105]").attr("selected", "selected");    
    });
</script>

As soon as I upload it to the site it has no effect. Can anyone help?

Possibly duplicate of http://stackoverflow.com/questions/314636/how-do-you-select-a-particular-option-in-a-select-element-in-jquery — Sasidharan, Sep 11 '13 at 12:41

score 12 · Accepted Answer · answered Sep 11 '13 at 12:37

12

If you know the value, why not just set it:

$( document ).ready(function() {
    $("#groupsel_0").val("105");    
});

FIDDLE

answered Sep 11 '13 at 12:37

adeneo

312,895
29
395
388

I will replace the solid value with a variable when I know that I can use it to change the dropdown. – Alperian Sep 11 '13 at 12:47
All of the suggestions work until I try them on the site. Is it because the page is loaded from a number of php sources? – Alperian Sep 11 '13 at 12:57
@Alperian - nope, the PHP is serverside, and shouldn't matter as long as it outputs valid markup. Open the console (F12) and see if there are any errors, and view the source in your browser to double check the selects ID, and that everything is outputted properly, that jQuery is included etc. – adeneo Sep 11 '13 at 13:10
Thank you everyone. Problem was http://stackoverflow.com/questions/12166883/type-error-is-not-a-function Which was solved by changing $() to jQuery(). – Alperian Sep 11 '13 at 14:05

score 6 · Answer 2 · answered Sep 11 '13 at 12:36

6

You can use .prop method instead like:

$( document ).ready(function() {
    $("#groupsel_0 option[value=105]").prop("selected", true);    
});

answered Sep 11 '13 at 12:36

palaѕн

72,112
17
116
136

score 1 · Answer 3 · answered Sep 11 '13 at 12:39

1

You can achieve it like this no need to do it like that

$( document ).ready(function() {
    $("#groupsel_0").val("105");    
    });

answered Sep 11 '13 at 12:39

rohitcopyright

362
1
2
9

Jquery to preselect a dropdown value

3 Answers3