Question

我有两个选择下拉列表

City:
<select id="city" name="city">
  <option value="0">Select City</option>
  <option value="1">Manchester</option>
  <option value="2">Leicester</option>
  <option value="3">Londra</option>
</select>

Street:
<select id="street" name="street">
  <option value="1.A">Street A</option>
  <option value="1.B">Street B</option>
  <option value="1.C">Street C</option>
  <option value="2.D">Street D</option>
  <option value="2.E">Street E</option>
  <option value="2.F">Street F</option>
  <option value="3.G">Street G</option>
  <option value="3.H">Street H</option>
</select>

在这里，我希望仅在城市的值为1和2时显示街道B。因此，我编写了一个带有remove和append的jQuery函数

$(function() {
  $('#city').change( function() {
    var val = $(this).val();

    if ((val != 2) && (val != 1)) {
      $("#street").find('[value="1.B"]').remove();
    }
    else {
     if( $("#street option[value='1.B']").length == 0)
     {
       $("#street").append(new Option("Street B", "1.B"));
     }
    }
  });
});

工作正常。但是，一旦选项被删除并在以后附加时，该选项将附加在末尾。是否有一种技术可以在删除之前存储索引，然后在追加过程中存储索引，我可以在特定索引处进行追加？

场景：

如果起初我选择选项Londra，则将删除街道B。
选择选项2莱斯特，B街应附加在后面。但应该保留索引。

Answer 1

您可以存储它的初始索引，当需要重新添加它时，添加before()当前位于该索引的选项

var $streetB = $("#street").find('[value="1.B"]'),
    streetBindex = $streetB.index();


$('#city').change(function() {
  var val = $(this).val();
  if ((val != 2) && (val != 1)) {
    $streetB = $("#street").find('[value="1.B"]').detach();
  } else {
    if ($("#street option[value='1.B']").length == 0) {
      $("#street option").eq(streetBindex).before($streetB.clone());
    }

  }


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
City:
<select id="city" name="city">
  <option value="0">Select City</option>
  <option value="1">Manchester</option>
  <option value="2">Leicester</option>
  <option value="3">Londra</option>
</select>
Street:
<select id="street" name="street" size=10>
  <option value="1.A">Street A</option>
  <option value="1.B">Street B</option>
  <option value="1.C">Street C</option>
  <option value="2.D">Street D</option>
  <option value="2.E">Street E</option>
  <option value="2.F">Street F</option>
  <option value="3.G">Street G</option>
  <option value="3.H">Street H</option>
</select>

Answer 2

在之前或之后使用：

$(function() {
  $('#city').change( function() {
    var val = $(this).val();
    if ((val != 2) && (val != 1)){

      $("#street").find('[value="1.B"]').remove();


    }
    else{
     if( $("#street option[value='1.B']").length == 0)
     {
       $("#street-c").before(new Option("Street B", "1.B"));
     }

    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
</head>

<body>
<select id="city" name="city">
  <option value="0">Select City</option>
  <option value="1">Manchester</option>
  <option value="2">Leicester</option>
  <option value="3">Londra</option>
</select>
<select id="street" name="street">
  <option value="1.A">Street A</option>
  <option value="1.B">Street B</option>
  <option id="street-c" value="1.C">Street C</option>
  <option value="2.D">Street D</option>
  <option value="2.E">Street E</option>
  <option value="2.F">Street F</option>
  <option value="3.G">Street G</option>
  <option value="3.H">Street H</option>
</select>
</body>
</html>

Answer 3

您可以使用jQuery提供的.eq() API并将其附加在任何所需的位置

$(function() {
  var currentIndex = $("#street option[value='1.B']").index();;
  $('#city').change(function() {
    var val = $(this).val();
    if ((val != 2) && (val != 1)) {
      $("#street").find('[value="1.B"]').remove();
    } else {
      if ($("#street option[value='1.B']").length == 0) {
        $("#street option").eq(currentIndex).before(new Option("Street B", "1.B"));
      }
    }
  });
});

在此处尝试演示：https://jsfiddle.net/nirmalrizal/hymk165e/11/

在特定索引处附加选择选项

3 个答案: