Question

我有一个页面包含“国家/地区”HTML选择标记和“区域”选择标记：

<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 chained plugin根据用户选择的国家/地区更改区域选择标记的内容：

<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功能的效果。在那种情况下，我想用包含所选国家/地区（美国，英国或加拿大）选项的区域选择标记替换文本标记。我尝试创建一个变量，然后使用该变量执行另一个替换，但它不起作用：

<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知识确实很弱，所以我不确定如何使这个工作。代码为here。

谢谢！

Answer 1

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

您将ID从“id_region”更改为“id_region_text”。它会在你第一次替换它时工作，因为有一个id为'id_region'的节点，但之后，$（'＃id_region_select'）不会返回任何内容，因为你已经替换了id。使用一致的id命名

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

如何在HTML选择标记上反转jQuery replaceWith函数的效果？

1 个答案: