jquery - 如何以编程方式禁用“选择”下拉列表中的选项

Question

我正在使用 JQuery 的 Chosen 插件 ( https://harvesthq.github.io/chosen/ )，并且选择效果良好。但我需要根据选择以编程方式禁用下拉列表中的某些选项，并且找不到任何可行的示例。例如，如果我选择“项目 1”，则应禁用“项目 2”。

我的下拉列表的渲染 HTML 是:

<div class="col-md-4">
          <label>Groups:</label>
          <select class="chosen-select" data-placeholder="Type to filter..." multiple="" style="display: none;">
          <optgroup class="depth-0" label="Group 1" data-index="-1">
            <option class="depth-1" value="Group 1" data-id="0" data-pid="-1">All items</option>
            <option class="depth-1" data-id="1" value="1" data-pid="-1">Item 1</option>
            <option class="depth-1" data-id="2" value="2" data-pid="-1">Item 2</option>
            <option class="depth-1" data-id="3" value="3" data-pid="-1">Item 3</option>
            <option class="depth-1" data-id="4" value="4" data-pid="-1">Item 4</option>
          </optgroup>
          <optgroup class="depth-0" label="Group 2" data-index="-2">
            <option class="depth-1" value="Group 2" data-id="0" data-pid="-2">All Items</option>
            <option class="depth-1" data-id="5" value="5" data-pid="-2">Item 5</option>
            <option class="depth-1" data-id="6" value="6" data-pid="-2">Item 6</option>
            <option class="depth-1" data-id="7" value="7" data-pid="-2">Item 7</option>
            <option class="depth-1" data-id="8" value="8" data-pid="-2">Item 8</option>
          </optgroup>
          </select>

          <div class="chosen-container chosen-container-multi" style="width: 2px;" title="">
          <ul class="chosen-choices">
          <li class="search-choice"><span>Item 1</span><a class="search-choice-close" data-option-array-index="2"></a></li>
          <li class="search-field"><input type="text" value="Type to filter..." class="" autocomplete="off" style="width: 25px;"></li></ul>

          <div class="chosen-drop">
          <ul class="chosen-results">
            <li class="group-result depth-0">Group 1</li>
            <li class="active-result group-option depth-1" data-option-array-index="1">All items</li>
            <li class="result-selected group-option depth-1" data-option-array-index="2">Item 1</li>
            <li class="active-result group-option depth-1" data-option-array-index="3">Item 2</li>
            <li class="active-result group-option depth-1" data-option-array-index="4">Item 3</li>
            <li class="active-result group-option depth-1" data-option-array-index="5">Item 4</li>
          <li class="group-result depth-0">Group 2</li>
            <li class="active-result group-option depth-1" data-option-array-index="6">All items</li>
            <li class="active-result group-option depth-1" data-option-array-index="7">Item 5</li>
            <li class="active-result group-option depth-1" data-option-array-index="8">Item 6</li>
            <li class="active-result group-option depth-1" data-option-array-index="9">Item 7</li>
            <li class="active-result group-option depth-1" data-option-array-index="10">Item 8</li>
          </ul>

          </div>
 </div>

Answer 1

你难道不知道吗...我一发布问题就找到了正确的命令组合:

var itemToDisable = $("option:contains('Item 2')");
itemToDisable.attr("disabled",true);
chosen_select.trigger("chosen:updated");

secret 武器是在选项上设置“禁用”属性，然后触发选择的更新。