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

Question

我的网页中有一些下拉框。 我希望用户一个一个地选择它们，根据这个下拉选择的选项更新下一个下拉选项。 我使用语义ui，所以它看起来更好，并具有搜索功能。 我知道语义 ui 有一个类可以禁用下拉菜单。

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

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

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

Answer 1

jquery 方式有效。 这是一个例子......

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

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

https://jsfiddle.net/anwar3606/n31xsjzn/

Answer 2

mfunction disable() {document.getElementById("mySelect").disabled=true; } function enable() {document.getElementById("mySelect").disabled=false; }

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

var a = document.getElementById("thedropdown"); alert(a.options[a.selectedIndex].value);

如果设置如下，应该为您提供下拉菜单的值

<select id="thedropdown"> <option value="1">one</option> <option value="2">two</option> </select>

Answer 3

这是jQuery方式：

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

Answer 4

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

禁用下拉菜单

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

启用下拉返回

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

Answer 5

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

原因

在幕后，semantic-ui 在运行时生成一个下拉列表，您的 HTML select标签被放置在生成的 HTML div 。 因此$('.ui.dropdown').addClass("disabled"); 仅禁用内部 HTML，而不是将下拉列表呈现给用户的实际 HTML 代码段。

解决方案

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

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

Answer 6

好解释了萨钦。 正如您所说，使用语义 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.disabled").removeClass("disabled");

或更具体的：

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

我不得不检查 html 元素并使用表单视图，因为启用和禁用受影响的元素是<div class = "field"> ，总计，这完全取决于您如何拥有视图。

我的表单视图：...

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

...

对不起，这就是我所拥有的。 我知道这听起来很奇怪，但这对我有用。

欢迎任何其他建议，我也有点迷失在这个主题上。

Answer 7

如果您试图禁用输入，以便它不会发布在表单提交上，那么您还需要通过添加"disabled"属性来"disabled"下拉列表中的select元素：

$('.ui.dropdown select').prop('disabled', true);

如果您只向下拉列表中添加一个.disabled类，您将无法选择不同的值，但该值仍会在表单提交时发布。 如果这就是您想要的，那么答案之一就是您所需要的。

但同样，要禁用表单控件并阻止表单发布，您必须同时执行以下两项操作：

$('.ui.dropdown').addClass('disabled');
$('.ui.dropdown select').prop('disabled', true);

Answer 8

Voici ce qui fonctionne chez moi (après de nombreuses recherches...)

<div class="ui three column grid">
<div class="row">
    <div class="five wide column">
        <div class="ui fluid labeled input">
            <div class="ui label"> Statut </div>
            <select class="ui fluid corner selection dropdown" name="statut" id="statut" required/>
                <option value="">Statut</option>
                <option value="Titulaire">Titulaire</option>
                <option value="Contractuel ou Stagiaire">Contractuel / Stagiaire</option>
            </select>
              <div class="ui corner orange label">
                <i class="asterisk icon"></i>
              </div>
        </div>
    </div>
    <div class="five wide center aligned column">
        <div class="ui fluid labeled input">
            <div class="ui label"> Origine </div>
            <div class="ui selection dropdown" name="MinOri" id="MinOri" required>
              <input type="hidden">
              <i class="dropdown icon"></i>
              <div class="default text">Origine</div>
              <div class="menu">
                <div class="item" data-value="value1">value1</div>
                <div class="item" data-value="value2">value2</div>
              </div>
              <div class="ui corner orange label">
                <i class="asterisk icon"></i>
              </div>
            </div>              
        </div>
    </div>
</div>
</div>
<script>
    document.getElementById('statut').addEventListener('change', function() {
        if (this.value == 'Titulaire') {
            document.getElementById("MinOri").classList.remove("disabled");
        } else {
            document.getElementById("MinOri").classList.add("disabled");
        }
    });
</script>