How to set the 'selected option' of a select dropdown list with jquery

Set the value it will set it as selected option for dropdown:

$("#salesrep").val("Bruce Jones"); 

Here is working Demo

If it still not working:

1. Please check JavaScript errors on console.
2. Make sure you included jquery files
3. your network is not blocking jquery file if using externally.
4. Check your view source some time exact copy of element stop jquery to work correctly

One thing I don't think anyone has mentioned, and a stupid mistake I've made in the past (especially when dynamically populating selects). jQuery's .val() won't work for a select input if there isn't an option with a value that matches the value supplied.

Here's a fiddle explaining -> http://jsfiddle.net/go164zmt/

<select id="example"> <option value="0">Test0</option> <option value="1">Test1</option> </select> $("#example").val("0"); alert($("#example").val()); $("#example").val("1"); alert($("#example").val()); //doesn't exist $("#example").val("2"); //and thus returns null alert($("#example").val()); 

You have to replace YourID and value="3" for your current ones.

$(document).ready(function() { $('#YourID option[value="3"]').attr("selected", "selected"); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> <select id="YourID"> <option value="1">A</option> <option value="2">B</option> <option value="3">C</option> <option value="4">D</option> </select>

and value="3" for your current ones.

$('#YourID option[value="3"]').attr("selected", "selected"); <select id="YourID" > <option value="1">A </option> <option value="2">B</option> <option value="3">C</option> <option value="4">D</option> </select> 

Use $('select[id="salesrep"]').val() to retrieve the selected value.

Use $('select[id="salesrep"]').val("john smith") to select a value from dropdown.

OR, you can use the following JS code:

for (var option of document.getElementById("salesrep").options) { //alert(option.value); if (option.value === "john smith") { option.selected = true; return; } } 

.val() doesn't like to set by text, but by using the index, instead, so you should do a find to get that, then set by it. But even that is only part of the story. You should first deselect all other options, and set the attribute of the option you want as selected using the index that you find.

I would not make the value and text the same, just so you have a positive assertion of what you are actually grabbing - the value vs. text - so you know what you are dealing with and don't run into these kinds of problems.

Btw, I hate the $('#myId') syntax because it is useless in SharePoint because it auto-generates GUIDs and puts them after the IDs, forcing you to have to grab it with $('[id*=myID]'), with the * indicating that it contains that value, so that is how I will set this up, except I'll leave out the * because it's unnecessary in this case. But this syntax is also very useful if you want to use $ instead of * to say it starts with that value, and you can use title or name instead of id, so it is incredibly versatile, and I wish more people used it.

You should also correct your capitalization issues, because JavaScript is case-sensitive.

$(document).ready(function() { var yourText = "Bruce Jones"; // Remove all 'selected' attributes from all options $('select[id="salesrep"] option').removeAttr('selected'); // Get the index for the value you want to set var idx = $('select[id="salesrep"] option').filter(function() { return $(this).html() == yourText; }).val(); // Set the dropdown value by index and set it as selected by text var salesrepBox = $('select[id="salesrep"]'); salesrepBox.val(idx); salesrepBox.find('option[value="' + yourValue + '"]').attr('selected','selected'); // note that .val() doesn't do this salesrepBox.click(); // may be useful and necessary for certain engines to cache the value appropriately console.log(salesrepBox.html()); // should show you that the selected option is Bruce Jones console.log(salesrepBox.val()); // should give you the index 2 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> <select id="salesrep"> <option value="1">John Smith</option> <option value="2">Bruce Jones</option> <option value="3">Adam Calitz</option> </select>

For jQuery Mobile, you may need to do this after the lines that affect the dropdown's selected attribute, whether removing it or adding it:

salesrepBox.selectmenu("refresh", true); 

Or do a .change(); on the end of the commands above, ex:

$('select[id="salesrep"] option').removeAttr('selected').change(); salesrepBox.find('option[value="' + yourValue + '"]').attr('selected','selected').change(); 

The match between .val('Bruce jones') and value="Bruce Jones" is case-sensitive. It looks like you're capitalizing Jones in one but not the other. Either track down where the difference comes from, use id's instead of the name, or call .toLowerCase() on both.