javascript - 根据另一个选择选项数据属性值禁用/删除选择选项
问题描述
如果#cities 选项值与#cities2 数据属性值匹配,我想显示来自#cities2 的选项。
例如,如果在第一个选择中选择迈阿密,则在第二个选择框中仅显示迈阿密并从#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);
});
});
这里也是小提琴演示
推荐阅读
- javascript - 使用 React 和 Redux 处理数据密集型请求的最佳方式是什么?
- html - 为什么我按箭头键时黑匣子不动?
- ios - 尝试在 iOS 的 txt 文件中保存数据时出现 UI 阻塞
- python - 解码 berkeley db 字符串
- python - 无法使用相对导入从当前目录导入 urllib3
- vue.js - Vuex:使用模块化的 Mutations 和 vuex 的 createNamespacedHelpers API
- python - 在 Python 中连接浮点值数组
- c# - 在 dotnet 命令上限制内存
- azure-devops - 使用 REST API 编辑 Release 定义或 Build 定义以传递变量组或 Schedule 是一个好方法
- css - CSS Mask 仅在 X 和 Y 轴上按时重复