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