Javascript 基于另一个选择选项数据属性值禁用/删除选择选项

如果cities选项值与cities2数据属性值匹配，我想显示cities2的选项

例如，如果在第一个选择框中选择了Miami，则在第二个选择框中仅显示Miami，并删除或禁用cities2中的所有其他选项

以下是我正在尝试的代码：

<select name="cities" id="cities">
    <option value="Los Angeles">Los Angeles</option>
    <option value="Miami">Miami</option>
    <option value="Las Vegas">Las Vegas</option>
    <option value="Chicago">Chicago</option>
</select>

<select name="cities2" id="cities2">
    <option data-cities="Los Angeles">Los Angeles</option>
    <option data-cities="Miami">Miami</option>
    <option data-cities="Las Vegas">Las Vegas</option>
    <option data-cities="Chicago">Chicago</option>
</select>

<script>
 $('#cities').change(function(e){
    var $option = $('#cities2 option').data('cities');
    if($(this).val() == "Miami" && $option == "Miami" ){
       $("#cities2 option").prop('disabled',true);           
       $("#cities2 option[data-cities='Miami']").prop('disabled',false);

    }else {
       $("#cities2 option").prop('disabled',false);
    };
 });
</script>

提前感谢您的帮助。

请尝试以下代码：

$('#cities').change(function(e){
    var $option = $('#cities2 option');
    var $selectedValue = $('#cities option:selected').val();

    $.each($option, function(inedx, option){
        var disabled = $selectedValue !== $(option).val();
      $(option).prop('disabled', disabled);
    });
 });

还有小提琴

洛杉矶 迈阿密 拉斯维加斯 芝加哥 洛杉矶 迈阿密 拉斯维加斯 芝加哥 $'cities'.changefunction{ var option=$this.val； console.logSelected first:+选项； 如果$this.val==Miami&&option==Miami{ 这里是迈阿密； $cities2选项。属性为'disabled'，true； $cities2选项[data cities='Miami']。属性'disabled'，false； $cities2选项[data cities='Miami']。属性'selected'，true； }否则{ 不是迈阿密； $cities2选项。属性“已禁用”，错误； }; };

---

你有任何控制台错误吗？@Shahzad没有，我没有任何控制台错误。@TheFool你能给我一个JSFIIDLE链接让我看看吗。谢谢