為什么這個onchange函式不能與option:selected一起使用？

這必須很簡單：為什么 this on change 功能不起作用option:selected？

而且，為什么我的變數state不會在選項更改時“重新加載”？

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

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

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

  jQuery("#shipping_state_field").append("<div id=\"no-ship-state\">Sorry, due to "   state   " state law, alcohol can't be shipped to a "   state   " address</div>");

  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>
  <option value="VT">Vermont</option>
</select>

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

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

uj5u.com熱心網友回復：

您一遍又一遍地附加“shipping_state_field”。我建議改為在您的標記中使用一個 div，您可以在必要時對其進行編輯，而不是每次您希望文本出現時都添加一個新的。下面的示例嘗試盡可能接近您的原始代碼：

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>

這種方式.html()用于替換 div 的內容，而不是每次都追加一個新內容。以下是一些關于細節的參考：

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

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

uj5u.com熱心網友回復：

正如評論中提到的，您不應該在每次用戶從下拉串列中選擇時附加 DIV，因為這會創建重復的 ID。

靜態創建 DIV，然后更新其中的狀態名稱。然后隱藏或顯示它。

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>

標籤：

上一篇：為什么對三個有效數字執行操作會得到NaN？

下一篇：zsh變數替換修改周圍的字串