How can I set the value of a DropDownList using jQ

Question

As the question says, how do I set the value of a DropDownList control using jQuery?

Answer 1

$("#mydropdownlist").val("thevalue");

just make sure the value in the options tags matches the value in the val method.

Answer 2

Here is a function made to quickly set the selected option:

function SetSelected(elem, val){
        $('#'+elem+' option').each(function(i,d){
        //  console.log('searching match for '+ elem + '  ' + d.value + ' equal to '+ val);
            if($.trim(d.value).toLowerCase() == $.trim(val).toLowerCase()){
        //      console.log('found match for '+ elem + '  ' + d.value);
                $('#'+elem).prop('selectedIndex', i);
            }
        });
    }

Call this function with argument element id and selected value; like this:

SetSelected('selectID','some option');

It is useful when there are lot of select options to be set.

Answer 3

Using the highlighted/checked answer above worked for me... here's a little insight. I cheated a little on getting the URL, but basically I'm defining the URL in the Javascript, and then setting it via the jquery answer from above:

<select id="select" onChange="window.location.href=this.value">
    <option value="">Select a task </option>
    <option value="http://127.0.0.1:5000/choose_form/1">Task 1</option>
    <option value="http://127.0.0.1:5000/choose_form/2">Task 2</option>
    <option value="http://127.0.0.1:5000/choose_form/3">Task 3</option>
    <option value="http://127.0.0.1:5000/choose_form/4">Task 4</option>
    <option value="http://127.0.0.1:5000/choose_form/5">Task 5</option>
    <option value="http://127.0.0.1:5000/choose_form/6">Task 6</option>
    <option value="http://127.0.0.1:5000/choose_form/7">Task 7</option>
    <option value="http://127.0.0.1:5000/choose_form/8">Task 8</option>
</select>
<script>
    var pathArray = window.location.pathname.split( '/' );
    var selectedItem = "http://127.0.0.1:5000/" + pathArray[1] + "/" + pathArray[2];
    var trimmedItem = selectedItem.trim();
    $("#select").val(trimmedItem);
</script>

Answer 4

In case when you load all <options ....></options> by Ajax call
Follow these step to do this.

1). Create a separate method for set value of drop-down
For Ex:

function set_ip_base_country(countryCode)
    $('#country').val(countryCode)
} 

2). Call this method when ajax call success all html append task complete

For Ex:

success: function (doc) {
  .....
  .....
  $("#country").append('<option style="color:black;" value="' + key + '">'  +   value + '</option>')
  set_ip_base_country(ip_base_country)
}

Answer 5

Set drop-down selected value and update changes

$("#PR2DistrictId option[value='@Model.PR2DistrictId']").attr("selected", true).trigger("chosen:updated")

Here we first set value from Model and than updated it on chosen

Answer 6

Try:

jQuery("#availability option:selected").val();

Or to get the text of the option, use text():

jQuery("#availability option:selected").text();

More Info:

 http://api.jquery.com/val/
 http://api.jquery.com/text/

$(document).ready(function(){ 
  $('#button1').click(function(){ 
    alert($('#combo :selected').text());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="combo">
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
</select>
<input id="button1" type="button" value="Click!" />