JQuery - how to select a dropdown based on a value

Question

I want the drop-down list (select) to vary depending on the value of the records.

I have

<select id="mySelect"> <option value="ps">Please Select</option> <option value="ab">Fred</option> <option value="fg">George</option> <option value="ac">Dave</option> </select> 

And I know that I want to change the drop-down list to select the parameter with the value "fg". How can I do this using jQuery?

Answer 1

You have to use

 $('#dropdownid').val('selectedvalue'); 

Here is an example:

 $('#dropdownid').val('selectedvalue'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id='dropdownid'> <option value=''>- Please choose -</option> <option value='1'>1</option> <option value='2'>2</option> <option value='selectedvalue'>There we go!</option> <option value='3'>3</option> <option value='4'>4</option> <option value='5'>5</option> </select> 

Answer 2

 $('#yourdropddownid').val('fg'); 

Optionally,

 $('select>option:eq(3)').attr('selected', true); 

where 3 is the index of the option you need.

Live demo

Answer 3

 $('#mySelect').val('fg');........... 

Answer 4

You can use this jQuery code, which I find more convenient:

 $('#your_id [value=3]').attr('selected', 'true'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="your_id" name="name" class="form-control input-md"> <option value="1">Option #1</option> <option value="2">Option #2</option> <option value="3">Option #3</option> <option value="4">Option #4</option> <option value="5">Option #5</option> <option value="6">Option #6</option> <option value="7">Option #7</option> </select> 

Answer 5

You can simply use:

 $('#select_id').val('fg') 

Answer 6

 $('#mySelect').val('ab').change(); 

Answer 7

In your case, $("#mySelect").val("fg") :)

Answer 8

It may be too late to answer, but at least someone will get help.

You can try two options:

This is the result when you want to assign based on the value of the index, where "0" is the index.

  $('#mySelect').prop('selectedIndex', 0); 

don't use 'attr' as it is deprecated with the latest jquery.

If you want to select based on the parameter value, select this:

  $('#mySelect').val('fg'); 

where 'fg' is the parameter value

Answer 9

You can select a dropdown option value by name

 jQuery("#option_id").find("option:contains('Monday')").each(function() { if( jQuery(this).text() == 'Monday' ) { jQuery(this).attr("selected","selected"); } }); 

Answer 10

I have a different situation when the values ​​of the drop-down list are already hardcoded. There are only 12 areas, so the jQuery Autocomplete UI user interface is not populated with code.

The solution is much simpler. Because I had to wade through other messages, where it was assumed that the control was loading dynamically, did not find what I needed, and then finally figured it out.

So, where you have the HTML, as shown below, the installation of the selected index is set like this: pay attention to the input part, which is in addition to the dropdown id:

 $('#project-locationSearch-dist-input').val('1'); <label id="lblDistDDL" for="project-locationSearch-input-dist" title="Select a district to populate SPNs and PIDs or enter a known SPN or PID." class="control-label">District</label> <select id="project-locationSearch-dist" data-tabindex="1"> <option id="optDistrictOne" value="01">1</option> <option id="optDistrictTwo" value="02">2</option> <option id="optDistrictThree" value="03">3</option> <option id="optDistrictFour" value="04">4</option> <option id="optDistrictFive" value="05">5</option> <option id="optDistrictSix" value="06">6</option> <option id="optDistrictSeven" value="07">7</option> <option id="optDistrictEight" value="08">8</option> <option id="optDistrictNine" value="09">9</option> <option id="optDistrictTen" value="10">10</option> <option id="optDistrictEleven" value="11">11</option> <option id="optDistrictTwelve" value="12">12</option> </select> 

Something else that emerged in the Autocomplete control is how to properly disable / empty it. We have 3 controls that work together, 2 of which are mutually exclusive:

 //SPN spnDDL.combobox({ select: function (event, ui) { var spnVal = spnDDL.val(); //fire search event $('#project-locationSearch-pid-input').val(''); $('#project-locationSearch-pid-input').prop('disabled', true); pidDDL.empty(); //empty the pid list } }); //get the labels so we have their tool tips to hand. //this way we don't set id values on each label spnDDL.siblings('label').tooltip(); //PID pidDDL.combobox({ select: function (event, ui) { var pidVal = pidDDL.val(); //fire search event $('#project-locationSearch-spn-input').val(''); $('#project-locationSearch-spn-input').prop('disabled', true); spnDDL.empty(); //empty the spn list } }); 

Some of them are beyond the scope of the publication, and I do not know where to express it. Since it is very useful and took some time to figure out, it was split.

Und Also ... to enable such a control, it (disabled, false) and NOT (enabled, true) - it also took a little time to understand. :)

The only thing to note besides publishing is:

  /* Note, when working with the jQuery Autocomplete UI control, the xxx-input control is a text input created at the time a selection from the drop down is picked. Thus, it created at that point in time and its value must be picked fresh. Can't be put into a var and re-used like the drop down list part of the UI control. So you get spnDDL.empty() where spnDDL is a var created like var spnDDL = $('#spnDDL); But you can't do this with the input part of the control. Winded explanation, yes. That how I have to do my notes or 6 months from now I won't know what a short hand note means at all. :) */ //district $('#project-locationSearch-dist').combobox({ select: function (event, ui) { //enable spn and pid drop downs $('#project-locationSearch-pid-input').prop('disabled', false); $('#project-locationSearch-spn-input').prop('disabled', false); //clear them of old values pidDDL.empty(); spnDDL.empty(); //get new values GetSPNsByDistrict(districtDDL.val()); GetPIDsByDistrict(districtDDL.val()); } }); 

Everyone shared because it took too long to learn these things on the fly. Hope this will be helpful.

Answer 11

 $('#dropdownid').val('selectedvalue'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id='dropdownid'> <option value=''>- Please choose -</option> <option value='1'>1</option> <option value='2'>2</option> <option value='selectedvalue'>There we go!</option> <option value='3'>3</option> <option value='4'>4</option> <option value='5'>5</option> </select>