How to Change a <Select> Value from JavaScript

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.

Update JavaScript variable on a HTML Select value change

There are multiple issues in your code:

You need to associate a change event in the select dropdown
You are using incorrect id in the if condition. It should be nivel and not lvl
Call changeLevel() function on page load so that it will set the default level variable based on the default selection.

function changeLevel(){  var level;  if(document.getElementById("nivel").value == "1"){      level = 2;  }  else{    if(document.getElementById("nivel").value == "2"){        level = 5;    } else{        level = 9;    }  }  document.getElementById("lvl").innerHTML=("Level: " +level);}changeLevel();

<select id="nivel" onchange='changeLevel()'>        <option value="1">easy</option>        <option value="2">medium</option>        <option value="3">hard</option></select><p id="lvl">Level: </p>

how change the value on change select tag

This can be by using ajax.

<html>
<head>
    <title>Food Order</title>
</head>
<body>
    <select id="food" >
        <option value="1">Cool Drink</option>
        <option value="2">Food</option>
    </select>
    <select id="Person" >
        <option>Select Option</option>
    </select>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#food").change(function(){
            var txt=$("#food").val();
            $("#Person").empty();
            $.ajax({
                url : 'load.php',
                method : 'POST',
                data : {txt:txt},
                success:function(data){
                    $("#Person").html(data);
                }
            });
        });
    });
</script>
</html>

Add another page with the name of (load.php) and add this code

<?php $data=$_POST['txt'];  ?>
<?php if ($data == 1): ?>
        <option>Pepsi</option>
        <option>Coac</option>
        <option>Sprite</option>
<?php else: ?>
        <option>Bar b Q</option>
        <option>Chicken</option>
        <option>Pizza</option>
<?php endif ?>

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>

How do I programmatically set the value of a select box element using JavaScript?

You can use this function:

function selectElement(id, valueToSelect) {    
    let element = document.getElementById(id);
    element.value = valueToSelect;
}

selectElement('leaveCode', '11');

<select id="leaveCode" name="leaveCode">
  <option value="10">Annual Leave</option>
  <option value="11">Medical Leave</option>
  <option value="14">Long Service</option>
  <option value="17">Leave Without Pay</option>
</select>

HTML SELECT - Change selected option by VALUE using JavaScript

You can select the value using javascript:

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

DEMO

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>

How to change the value of the text or select a dropdown value by using document.getElementById(id)

Change selectedValue to value

document.getElementById("dropdownlist").value = "apple";

How to Change a <Select> Value from JavaScript