Re-assigning a selected value from a dropdown list?

Question

I'm trying to re-assign a selected value from a dropdown list, but I'm not sure how to do this. I've tried a couple of things, but no luck yet...

1) that.value = "Aqua";

2) $(that).val("Aqua");

3) $(that).attr("value", "Aqua");

Any help would be appreciated.

<select onchange="yesnoCheck(this);" name="name" id="selectedColor" required >
  <option value="" selected>Select an Option</option>
  <option value="Blue">Option 1</option> 
  <option value="Orange">Option 2</option> 
  <option value="Red">Option 3</option>       
</select>

<script>
function yesnoCheck(that) {
    if (that.value == "Blue" ) {

           that.value = "Aqua";  /* <----- re-assign the value */

          /*  commented out */
          /* $(that).val("Aqua");
           $(that).attr("value", "Aqua"); */ 

    }
    ...
}

Answer 1

Your question is a bit confusing

Do you mean that change the text after you select? You can do the code below

</script>
<select onchange="yesnoCheck(this);" name="name" id="selectedColor" required >
  <option value="" selected>Select an Option</option>
  <option id="change" value="Blue">Option 1</option> 
  <option value="Orange">Option 2</option> 
  <option value="Red">Option 3</option>       
</select>

<script>
function yesnoCheck(e) {
    if (e.value == "Blue" ) {

           $("#change").text("Aqua"); 
    }    
}
</script>

Or, you want to change the option value from "Blue" to "Aqua", then

$("#change").val("Aqua");