如何通过 JavaScript/JQuery 更改选定的 DropDownList 项目？

Question

I want to change the selected option of my ASP.NET DropDownList using JS / JQuery and get the selected Value later on.

In DOM:

<select id="myDDL" name="myDDL">
  <option selected="selected" value="0"> Option 1 </option>
  <option value="1"> Option 2 </option>
  <option value="2"> Option 3 </option>
</select>

I tried $("#myDDL").val(1); but this does not work 100%. The text of it will be displayed ("Option 2") but there is still the first option selected in DOM.

I want to get the selectedValue in a code behind button onclick method using

protected void myButton_Click(object sender, EventArgs e)
{
  int val = myDDL.SelectedValue;
  ...
}

but this returns 0 instead of 1, which means Option 1 is still selected.

So what do I have to do to set the second option correctly? And why does the displayed text change to the one of option 2, but not the selected attribut?

Cheers

Answer 1

You can use the selectedIndex , like so:

 let select = document.getElementById("myDDL"); select.options.selectedIndex = 1;

 <select id="myDDL" name="myDDL"> <option selected="selected" value="0"> Option 1 </option> <option value="1"> Option 2 </option> <option value="2"> Option 3 </option> </select>

The HTMLSelectElement.selectedIndex is a long that reflects the index of the first or last selected element, depending on the value of multiple. The value -1 indicates that no element is selected.

Answer 2

 $('#myDDL').change(function() { val= $('#myDDL:selected').map(function(i, el) { return $(el).val(); }).get(); console.log(val); });

Answer 3

I figured it out.

The problem was that the ViewState of the DropDownList was disabled.

Adding

myDDL.EnableViewState = true;

fixed the problem.

Now, using

$("#myDDL").val(1);

works fine.