Changing the Selected Option of an HTML Select Element

How do I programatically select an HTML option using JavaScript?

Change

document.getElementById('personlist').getElementsByTagName('option')[11].selected = 'selected'

document.getElementById('personlist').value=Person_ID;

How to change the current selected option in the <select> by JS

You are confusing attributes and properties. Changing a property is a dynamic action that affects the in-memory object, it doesn't modify the static HTML that the element was originally parsed with. If you want to change the attribute, you need to use setAttribute() or removeAttribute().

var select = document.body.querySelector('select');
// Get the element with the "selected" attributeconsole.log("Element with 'selected' HTML attribute: " +    select.querySelector("[selected]").getAttribute("value"));
// Get the element with the "selected" value:console.log("Element with value property of 'selected': " + select.value);
// Change the value property of the selectconsole.log("Changing value of select element to 'Rock'");select.value = "Rock";
// Get the element with the "selected" attributeconsole.log("Element with 'selected' HTML attribute: " +    select.querySelector("[selected]").getAttribute("value"));  // Still Blues!
// Get the element with the "selected" value:console.log("But, value of the select element is now: " + select.value);  // Now Rock!
// Change which element has the selected attributeconsole.log("Switching elment that has the 'selected' attribute...");select.querySelector("[selected]").removeAttribute("selected");select.querySelector("[value=Rock]").setAttribute("selected", "selected");
console.log("Element with 'selected' HTML attribute: " +   select.querySelector("[selected]").getAttribute("value"));  console.log(select.options[0])console.log(select.options[1]);

<select>  <option value="Rock">Storm</option>  <option value="Blues" selected>Rain</option></select>

Change value of selected option

Please try this instead.

$("#countryId").change(function () {
  // get text from option
  countrytxt = $(this).find("option:selected").text(); 
  // save for send as paramet to server
  var countryId = $("#countryId").val(); 
  // try set county name to value
  $(this).find("option:selected").attr('value',countrytxt);
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="country" id="countryId" required="required"
class="countries order-alpha form-control custom-select bg-white border-left-0 border-md">
  <option value="">Select Country</option>
  <option value="1"> Afghanistan</option>
  <option value="2"> Aland Islands</option>
  <option value="3"> Albania</option>
  <option value="4"> Algeria</option>
  <option value="5"> American Samoa</option>
</select>

3 select elements that change options based on the selected option in the first and second select

When you are passing the value to the next drop down you are passing the index from dropdown 1 to dropdown 2, from dropdown 2 to dropdown 3 you're passing the value.

drop down one you select first option
The value passed to the second drop down is 1.
The value you select drop down two is 1
The value you pass is test1

The values you are using in drop down 2 are dependent or pointing to the values of drop down one. You should decouple this, specifically pass the index or value to set the options array.

Something like so:
`
$(document).ready(function() {

$("#item1").change(function() {
    var value = $(this).val();
    $("#item2").html(options[value]);
});

$("#item2").change(function() {
    var value = $(this).val();
    $("#item3").html(options[value]);
});


var options = [
    "<option value='0'>item1: test 1</option><option value='1'>item1: test 2</option>",
    "<option value='0'>item2: test 1</option><option value='1'>item2: test 2</option>",
    "<option value='0'>item3: test 1</option><option value='1'>item3: test 2</option>"
];

});
`

How to change HTML select name based on option value

The shortest change, given that code and modern browsers, would be:

onChange="this.name = this.value; document.getReportAll.submit()"

...since within the attribute event handler, this refers to the select element and modern browsers reflect the option value as value in single-selects.

HTML SELECT - Change selected option by VALUE using JavaScript

You can select the value using javascript:

document.getElementById('sel').value = 'bike';

DEMO

Change class of html element when specific option/value is selected in select field

Your select element:

<select id="someSelectElement"></select>

In your javascript:

document.addEventListener("DOMContentLoaded", function(event) { 
    document.getElementById("someSelectElement").addEventListener('change', function(e) {
        //your event handling code here
    })
})

Edit: Wrapped the change event listener inside the DOMContentLoaded event handler so as to ensure that someSelectElement has been loaded in the document before assigning the listener to it.

Here's the updated fiddle

Can't change selected option in a select

Is grpValue a variable? If so

$("#ID option[value="+grpValue+"]").prop('selected', 'selected').change();

will make the attribute selector do the work.

BTW, I think

$obj.prop('selected', true);

is the correct expression for prop.

How to change a <select> value from JavaScript

Setting .value to the value of one of the options works on all vaguely-current browsers. On very old browsers, you used to have to set the selectedIndex:

document.getElementById("select").selectedIndex = 0;

If neither that nor your original code is working, I wonder if you might be using IE and have something else on the page creating something called "select"? (Either as a name or as a global variable?) Because some versions of IE have a problem where they conflate namespaces. Try changing the select's id to "fluglehorn" and if that works, you know that's the problem.