Change the selected value of a drop-down list with jQuery

Active3 hr before
Viewed126 times

8 Answers


Example 2: This example uses attr() function to assign the selected attribute to the corresponding option.,Example 1: This example uses val() function to set the option corresponding to the passed value.,How to change selected value of a drop-down list using jQuery?,attr() function: It sets or returns the attributes and values of the selected elements.


[jQuery.val] checks, or selects, all the radio buttons, checkboxes, and select options that match the set of values.,EDIT: Add single quote around "+newselectedIndex+" so that the same functionality can be used for non-numerical values.,Could not set the selected property. Invalid Index,So what I do is actually ,removed the selected attribute and then make the new one as selected.

You most likely want this:

load more v

How to Change the selected value of a drop-down... ,84309/how-to-change-the-selected-value-of-drop-down-list-with-jquery, Web Development (1,457) ,JavaScript interview questions

I have a drop-down list with known values. What I'm trying to do is set the drop down list to a particular value that I know exists using jQuery. Using regular JavaScript, I would do something like:

ddl = document.getElementById("ID of element goes here");
ddl.value = 2; // 2 being the value I want to set it too.

Here are a few things I've tried:

$("._statusDDL").val(2); // Doesn't find 2 as a value.
$("._statusDDL").children("option").val(2) // Also failed.
load more v

You have a select element, and you need to “select” one of its options based on one of its values. What you do is use the “selected-selector” of jQuery to do it in a single line.,Lets say I have the following select element and I need to dynamically select the option with a value of 3, which would be the “Peach”.,If you want to get a little bit more technical, make sure you read the official jQuery documentation regarding this subject.,© 2021 Danny Herran. No Rights Reserved. | RSS Feed

Lets say I have the following select element and I need to dynamically select the option with a value of 3, which would be the “Peach”.

<select name="myselect" id="myselect">
   <option value="1">Apple</option>
   <option value="2">Pear</option>
   <option value="3">Peach</option>
   <option value="4">Orange</option>
load more v

Search Answer Titles

$('select[name^="salesrep"] option[value="Bruce Jones"]').attr("selected", "selected");
load more v

View Javascript questions

if (projecttype == "FTE" || projecttype == "Retainer") {
   //  $('#drprojecttype').val("Dedicated");
   $("#drprojecttype option[value='Dedicated']").attr("selected", "selected");
   //  $("#drprojecttype").val("Dedicated");
} else {
   // $("#drprojecttype").val("Adhoc");
   $('select[name^="drprojecttype"] option:selected').attr("selected", null);
   $("#drprojecttype option[value='Adhoc']").attr("selected", "selected");
<select id="drprojecttype" name="drprojecttype" class="form-control" style="width:50%;">
   <option value="0">--select--</option>
   <option value="Adhoc">Adhoc</option>
   <option value="Dedicated">Dedicated</option>
load more v

How to Change Selected Value of a Drop-Down List Using jQuery ,The jQuery prop() method can help you get the text value of the selected option for jQuery 1.6+ versions:, How to Know which Radio Button is Selected using jQuery ,The val() method also sets the option that corresponds to the passed value:

<!DOCTYPE html>
  <script src=""></script>
      <option value="0">Value1</option>
      <option value="1">Value2</option>
      let text = 'Value2';
      $("select option").filter(function() {
          //may want to use $.trim in here
          return $(this).text() == text;
        }).prop('selected', true);
load more v

How to get selected text from a drop-down list (select box) using jQuery?,With jQuery, it’s easy to get selected text from a drop-down list. This is done using the select id. To change the selected value of a drop-down list, use the val() method.,Use jQuery to get values of selected checkboxes?,Get Selected Option from Dropdown with jQuery?


      <title>jQuery Selector</title>
      <script src = ""></script>
         $(document).ready(function() {
                 alert( $("#myselection option:selected").text() );

        <p>The selected value:</p>
        <select id="myselection">
          <option value="1">First</option>
          <option value="2">Second</option>
          <option value="3">Third</option>
     <button id="button1">Click</button>


Other "selected-change" queries related to "Change the selected value of a drop-down list with jQuery"