Javascript 如果在第一个下拉列表中未选择任何内容，如何禁用第二个多选下拉列表？

我正在使用下面的代码，但在从第一个下拉列表中选择值之后，第二个下拉框始终保持禁用状态。如何在第一个多选下拉列表的基础上禁用和启用第二个多选下拉列表

<select id="multi-select-demo" multiple="multiple" style="display: none;">  
<option value="analysis">Analysis</option>
<option value="algebra">Linear Algebra</option>
<option value="discrete">Discrete Mathematics</option>
<option value="numerical">Numerical Analysis</option>
<option value="probability">Probability Theory</option>

我的启用/禁用脚本如下：

<script>
$('#multi-select-demo').change(function(e){
$('#multi-select-demo1').prop('disabled', !$(this).val());

});
$(function(){
  $('#multi-select-demo').prop('disabled', true);
  $('#multi-select-demo1').prop('disabled', true);
});
</script>

我的多选择脚本，我无法粘贴。如果在第一个多选下拉列表中未选择任何内容，如何禁用/启用第二个多选下拉列表？

多选值是一个数组，因此请检查长度

<select id="multi-select-demo" multiple="multiple" style="display: none;">  
<option value="analysis">Analysis</option>
<option value="algebra">Linear Algebra</option>
<option value="discrete">Discrete Mathematics</option>
<option value="numerical">Numerical Analysis</option>
<option value="probability">Probability Theory</option>

---

JSFIDLE demo:

您需要更改条件，以便在未选择任何选项时，禁用select。最可靠的方法是如果selectedIndex属性为-1

重置按钮上还需要一个侦听器，以便在重置表单时，将select设置回disabled（禁用）：

window.onload=函数{ document.getElementById'multi-select-demo'。addEventListener'change'，函数{ document.getElementById'multi-select-demo1'。disabled=this.selectedIndex=-1； }，假； document.getElementById'formReset'。addEventListener'click'，函数{ document.getElementById'multi-select-demo1'。disabled=true； }，假； } 分析 线性代数 离散数学 数值分析 概率论 编程导论 自动机理论 复杂性理论 软件工程 看看

只需使用.multiselect“disable”和.multiselect“enable”方法即可

在您的multi-select配置中使用onChange道具并检查它。$select.val，它将为您提供所选值的数组（当然，如果选择了任何值）。如果未选择任何内容，则返回null

这里有一个例子

var$sel1=$'multi-select-demo'； var$sel2=$'multi-select-demo1'； $sel1.5{ 非选定文本：从栏中选择， onChange:functionoption，选中，选择{ 如果此.select.val&&this.select.val.length{ $sel2.多选“启用” }否则{ $sel2.多选“禁用” } } }; $sel2.5{ disabledText:“先选择栏” }; @进口urlhttp://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css; @进口urlhttps://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css; 分析 线性代数 离散数学 数值分析 概率论 编程导论 自动机理论 复杂性理论 软件工程

---

嗨，米格尔。正如你所说的那样努力。但它在我的eclipse中不起作用。我正在使用引导显示带有复选框的下拉列表。Socond下拉列表将禁用。但在从第一个下拉列表中选择值后，我无法启用它。我的下拉列表显示如下示例你能帮我找到我提到的url吗？谢谢你的帮助advance@Muskan使用bootstrap multi-select Thank you@Miguel的工作示例。它现在正在工作。但有一个问题。我使用下面的代码来制作固定宽度的下拉列表。如果我们尝试使用固定宽度脚本和您建议的脚本。这两个方面都不起作用。你能帮我一下吗，如果它也能和固定宽度的代码一起工作的话。请在下面找到我的代码multiselect。先谢谢你。请在下面找到我的代码：$document.readyfunction{$'multi-select-demo'.multiselect{buttonWidth:'500px'}；}。多选容器{宽度：100%！重要；}

$('#multi-select-demo').change(function(event) {
  $('#multi-select-demo1').prop('disabled', !$(this).val().length);
});