语义ui如何使用javascript启用或禁用下拉列表

我的网页上有一些下拉框。我希望用户选择他们一个接一个，更新下一个下拉选项的基础上，这个下拉选择的选项。我使用语义用户界面，因此它看起来更好，并具有搜索功能。我知道语义用户界面有一个类可以禁用下拉列表

我的问题是如何使用javascript启用或禁用下拉列表。我尝试添加或删除该类，但不起作用。或者不可能做到这一点

<select name="subject" id="subject" class="ui search dropdown disabled" >
    <option value="">Subject</option>
</select>

$('#subject').removeClass('disabled');

主题
$（“#主题”）.removeClass（'disabled'）；

mfunction disable（）{document.getElementById（“mySelect”）.disabled=true；
}
函数enable（）{document.getElementById（“mySelect”）.disabled=false；
}

应该能够启用和禁用下拉框。现在，您需要做的就是读取答案并相应地启用/禁用

var a=document.getElementById（“DropDown”）；
警报（a.options[a.selectedIndex].value）

如果下拉菜单设置为


一
二

以下是jQuery的方法：

$("#subject").prop("disabled", true);

jquery方法是有效的。
这里有一个例子

$('.dropdown').dropdown();

$('.ui.dropdown').addClass("disabled");

如果有人想启用已禁用的下拉菜单

禁用下拉列表

$('.ui.dropdown').addClass("disabled");

启用下拉菜单

$('.ui.dropdown').removeClass("disabled");

我尝试了这里提到的所有解决方案，但没有任何效果

原因

在幕后，语义ui会在运行时生成一个下拉列表，您的HTML
select
标记会放在生成的HTML
div
中。因此，
$（'.ui.dropdown'）.addClass（“禁用”）仅禁用内部HTML，而不是将下拉列表呈现给用户的实际HTML代码片段

解决方案

因此，要禁用下拉列表（外部HTML标记），请执行以下操作：

$('.ui.dropdown').parent().addClass("disabled");

很好，萨钦解释道。正如您所说，单独使用语义UI不足以启用或禁用
.prop（“disabled”，true）
或
.prop（“disabled”，false）
；在我的情况下，我使用了不止一个下拉列表，结果如下

首先按元素id禁用下拉列表：

$("#person_state_id").prop("disabled", true);
$("#person_city_id").prop("disabled", true);

当我想启用时，使用
.parent（）
或
.parent（'div'）
得到相同的结果

$("#person_state_id").parent('div').removeClass('disabled');
$("#person_state_id").prop("disabled", false);
$("#person_city_id").parent().removeClass('disabled');
$("#person_city_id").prop("disabled", false);

在某些情况下，我是按照下面的“通用”方式来做的

或者更具体地说：

$(".field.city").removeClass("disabled");

我必须检查html元素并使用表单视图，因为当启用和禁用受影响的元素时，
，总计，这一切都取决于您如何使用视图

我的表单视图：


“请选择一个国家…”，
html_选项={class:“ui流体搜索选择下拉列表”}%>
“请先选择一个国家…”，
html_选项={class:“ui流体搜索选择下拉列表”}%>
“请先选择一个国家和州…”，
html_选项={class:“ui流体搜索选择下拉列表”}%>


对不起，我只有这些。我知道这听起来很奇怪，但对我来说就是这样

欢迎任何其他建议，我对这个主题也有点迷茫。
谢谢@Anwar Hossain它起作用了，我的代码怎么了？id为的东西？apply.addClass（）函数用于另一个元素，以检查jquery是否工作正常。并检查“$（'select'）.dropdown（）；”是否有帮助
$(".field.city").removeClass("disabled");

      <div class="field country">
        <%= form.label :country_id %>
        <%= form.collection_select :country_id, @countries,:id, :name, options = {:prompt => 'Please select a Country...'},
        html_options = {class: "ui fluid search selection dropdown"}%>
      </div>
    
      <div class="field state">
        <%= form.label :state_id %>
        <%= form.collection_select :state_id, @states, :id, :name, {:prompt => 'Please select a Country first...'},
        html_options = {class: "ui fluid search selection dropdown"} %>
      </div>
    
      <div class="field city">
        <%= form.label :city_id %>
        <%= form.collection_select :city_id, @cities, :id, :name, {:prompt => 'Please select a Country and State first...'},
        html_options = {class: "ui fluid search selection dropdown"} %>
      </div>