如何扭转jQuery replaceWith函数对HTML选择标记的影响

How to reverse effects of jQuery replaceWith function on HTML select tag?

本文关键字：选择 影响 HTML 何扭转 jQuery replaceWith 函数      更新时间：2023-09-26

我有一个包含"Country"HTML选择标记和"Region"选择标记的页面：

<body>
  <span>Country</span><br>
  <select name="country" id="id_country" onchange="changeRegion()">
      <option value="" selected="selected">-- Select --</option>
      <option value="US">United States</option>
      <option value="UK">United Kingdom</option>
      <option value="CA">Canada</option>
      <option value="MX">Mexico</option>
      <option value="ID">Indonesia</option>
      ...
  </select>
  <span>Region</span><br>
  <select name="region" id="id_region">
      <option value="" selected="selected">-- Select --</option>
      <option value="AL" class="US">Alabama</option>
      <option value="AK" class="US">Alaska</option>
      <option value="AZ" class="US">Arizona</option>
      <option value="Avon" class="UK">Avon</option>
      <option value="Bedfordshire" class="UK">Bedfordshire</option>
      ... # other UK counties
      <option value="ON" class="CA">Ontario</option>
      <option value="QB" class="CA">Quebec</option>
      ... # other CA provinces
  </select><br>
</body>

我使用jQuery链式插件根据用户选择的国家更改地区选择标签的内容：

<script src="https://cdn.jsdelivr.net/jquery.chained/0.9.9/jquery.chained.min.js"></script>
<script type="text/javascript">
    $("#id_region").chained("#id_country");
</script>

一个问题是，如果用户选择了美国、英国或加拿大以外的国家，我想用地区输入文本标签替换地区选择标签，这样用户就可以输入他们居住的特定国家的地区。我想我知道如何使用jQuery replaceWith功能来做到这一点：

<script type="text/javascript">
    $("#id_region").chained("#id_country");
    function changeRegion() {
      var country = document.getElementById("id_country");
      if (country.value !== 'US' && country.value !== 'UK' && country.value !== 'CA') {
          $('#id_region').replaceWith($('<input type="text" name="region" id="id_region_text" />'));
      }
    }
</script>

这似乎很有效。我遇到的问题是，如果用户选择了墨西哥或印度尼西亚，然后出于任何原因决定选择美国、英国或CA，我想弄清楚如何扭转replaceWith功能的效果。在这种情况下，我想用区域选择标记替换文本标记，该标记包含他们选择的国家(美国、英国、或CA(的选项。我尝试创建一个变量，然后使用该变量进行另一次替换，但不起作用：

<script type="text/javascript">
    $("#id_region").chained("#id_country");
    $select_region = '<select name="region" id=...</select>'   /* This didn't work */
    function changeRegion() {
      var country = document.getElementById("id_country");
      if (country.value !== 'US' && country.value !== 'UK' && country.value !== 'CA') {
          $('#id_region').replaceWith($('<input type="text" name="region" id="id_region_text" />'));
      } else {
          $('#id_region_select').replaceWith($select_region);   /* This didn't work */
      }
    }
</script>

如何反转此replaceWith函数的效果？还有，有更好的方法吗？如果解决方案确实需要创建一个$select_region变量，那么如果我稍后决定添加更多的国家和地区，则将很难维护。诚然，我的JavaScript和jQuery知识相当薄弱，所以我不确定如何实现这一点。代码在这里。

谢谢！

$('#id_region').replaceWith($('<input type="text" name="region" id="id_region_text" />'));

您已将id从"id_region"更改为"id_reRegion_text"。第一次替换它时会起作用，因为有一个id为"id_region"的节点，但在那之后，$("#id_region_select"(不会返回任何内容，因为您已经替换了id。使用一致的id命名

此外，对于每个replaceWIth((，绑定的事件都会丢失，因此您必须再次执行$("#id_region").chained("#id_country")

相关文章：