Why does this onchange function not work with option:selected?

You're appending the "shipping_state_field" over and over again. I'd recommend instead using a div in your markup that you edit whenever necessary instead of adding a new one every time you want the text to appear. The example below tries to stay as close as possible to your original code:

var states = ["AL", "IL", "MI", "MS", "UT", "VT", "NH"];

$('#shipping_state').on('change', function() {

  var state = jQuery("#shipping_state option:selected").text();

  jQuery("#no-ship-state").html("Sorry, due to " + state + " state law, alcohol can't be shipped to a " + state + " address");

  if (states.includes($(this).val())) {
    jQuery("#no-ship-state").show();
  } else {
    jQuery("#no-ship-state").hide();
  }
});

#no-ship-state {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<select name="shipping_state" id="shipping_state" data-label="State / County">
  <option value="">Select an option&hellip;</option>
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

<div id="shipping_state_field"></div>

<div id="no-ship-state"></div>

This way .html() is used to replace the content of the div instead of appending an new one every time. Here's some references about the details:

https://developer.mozilla.org/en-US/docs/Web/API/Element/append

https://api.jquery.com/html/

As mentioned in comments, you should't append the DIV each time the user selects from the dropdown, as this creates duplicate IDs.

Create the DIV statically, and just update the name of the state in it. Then hide or show it.

var states = ["AL", "AK", "AZ", "VT"];

$('#shipping_state').on('change', function() {

  var state = $("#shipping_state option:selected").text();
  console.log(state);

  if (states.includes($(this).val())) {
    $(".state_name").text(state);
    jQuery("#no-ship-state").show();
  } else {
    jQuery("#no-ship-state").hide();
  }
});

#no-ship-state {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<select name="shipping_state" id="shipping_state" data-label="State / County">
  <option value="">Select an option&hellip;</option>
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
  <option value="VT">Vermont</option>
  <option value="NY">New York</option>
</select>

<div id="no-ship-state">Sorry, due to <span class="state_name"></span> state law, alcohol can't be shipped to a <span class="state_name"></span> address</div>

Why does this onchange function not work with option:selected?

Related

Recent Posts