选项仍然可见在选择后删除（）

Question

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

<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> 

在拨弄它工作正常here，但在手机的问题是：如果我从选择ID选择方案二秒，在第一选择ID，然后选择选项值的两个，然后又方案二在第二个选择ID中是可见的，如果我点击第二个选择ID然后只删除它。但在jsFiddle中它完美无缺。任何建议将不胜感激，提前致谢。

Answer 1

检查这个Edit

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

Answer 2

你的代码看起来有点奇怪的整体。如果你的意图是，如果它是在“第一”选择从“第二”删除的项，试试这个更新：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'); 
});​ 

Answer 3

在这里，我已经做了上述问题完全完事。请通过演示链接。

演示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