javascript - remove() 后选项在选择中仍然可见

Question

大家好，我有两个选择字段，如果用户选择选项值一或二，则首先在选择字段上，然后在第二个的选择字段中，所有选项都是可见的，但如果它首先选择选项二，则选项二要从第二个选择 ID 中删除。以下是我的代码：

<script type="text/javascript">
 var index3,str;
</script>

<select id="first"  onchange="chk();">
<option value = "one">one</option>    
<option value = "two">two</option>    
<option value = "three">three</option>    
</select>

<select id="second">
<option value = "one">one</option>    
<option value = "two">two</option>    
<option value = "three">three</option>     
</select>


<script type="text/javascript">
function chk()
{
    index3 = document.getElementById("first");
    str= index3.options[index3.selectedIndex].value;

    alert("str:"+str);

    if (str=="two")
    {
          $("#second option[value='two']").remove();
    }

    else
    {
          if ( $("#second  option[value='two']").length == 0 )
         {

             $("#second").append('<option value="two">two</option>');
         }
    }
}
</script>

在小提琴中它在这里工作正常，但在移动问题上是：如果我从第二个选择 id 中选择选项二，然后在第一个选择 id 中选择选项值二，那么在第二个选择 id 中也可以看到选项二，如果我点击第二个选择 id 然后只有它删除。但在 jsFiddle 中，它运行良好。任何建议将不胜感激，在此先感谢。

Answer 1

在这里，我已经为上述问题完成了完整的 bin。请通过演示链接。

演示 http://codebins.com/bin/4ldqp7p

HTML

<select id="first">
  <option value = "one">
    one
  </option>

  <option value = "two">
    two
  </option>

  <option value = "three">
    three
  </option>

</select>

<select id="second">
  <option value = "one">
    one
  </option>

  <option value = "two">
    two
  </option>

  <option value = "three">
    three
  </option>

</select>

jQuery

$(function() {

    $("#first").change(function() {
        var optVal = $(this).val().trim();

        if (optVal == "two") {

            $("#second").find("option[value=" + optVal + "]").remove();
        } else {
            if ($("#second").find("option[value=two]").length <= 0) {

                $("<option value=\"two\">two</option>").insertAfter($("#second").find("option[value='one']"));

            }
        }
    });

});

演示 http://codebins.com/bin/4ldqp7p

Answer 2

检查这个编辑

$('#first').change(function() {
      $("#second option[value='" + $(this).val() + "']").remove();
});

Answer 3

您的代码总体上看起来有点奇怪。如果您打算从“第二”中删除该项目，如果它在“第一”中被选中，请尝试此更新：http: //jsfiddle.net/NWbXt/58/

$(function() {
    var first = $('#first'),
        second = $('#second'),
        removed;

    first.change(function() {
        var selected = first.val();
        second.append(removed);  //.. add back old option
        removed = second.find('option[value="' + first.val() + '"]').remove();        
    }).trigger('change');
});​