Select 选项在一个下拉菜单中禁用另一个选项？

Question

我正在运行一个 Rails 应用程序，并希望根据上一个下拉列表中选择的内容禁用下拉列表中的选项

$(function() {
  var segments = document.getElementById("add-segments").getElementsByClassName("item active");
  var defaults =  document.getElementById("segment-defaults").getElementsByTagName("option");
  
  for (var i = 0; i < segments.length; i++){
    (segments[i].val() == defaults[i].val()) ? defaults[i].disabled = true : defaults[i].disabled = false
  }  
});

 <div id="segment-defaults-checkbox">
     <p id="add-segments">
         <%= label_tag :segments, 'Add Segments' %>
         <%= select_tag :segments,
              options_from_collection_for_select(@default_segments, 'id', 'name', @segments),
             { prompt: 'Select all that apply', multiple: true, class: 'selectize-no-add'} %>
     </p>
     <p id="segment-default">
         <%= f.label :default_segment, 'Choose A Default Segment' %>
         <%= f.select :default_segment,
             options_from_collection_for_select(@default_segments, 'id', 'name'),
             { prompt: 'Select One' } %>
    </p>
</div>

Answer 1

我不知道它的 rails 模板是如何工作的，但如果我没记错的话，也许下面的这段代码将帮助您解决问题。

您没有得到一些结果，这是因为您将 id 放在p标签中，而不是select标签中，是的，您可以将以下代码用于您的导轨：

 <div id="segment-defaults-checkbox">
     <p id="add-segments">
         <%= label_tag :segments, 'Add Segments' %>
         <%= select_tag :segments,
              options_from_collection_for_select(@default_segments, 'id', 'name', @segments),
             { prompt: 'Select all that apply', multiple: true, class: 'selectize-no-add', id: 'select-tag'} %>
     </p>
     <p id="segment-default">
         <%= f.label :default_segment, 'Choose A Default Segment' %>
         <%= f.select :default_segment,
             options_from_collection_for_select(@default_segments, 'id', 'name'),
             { prompt: 'Select One' }, id: 'select-default-segment' %>
    </p>
</div>

之后，您可以使用这个普通的 javascript 代码来获得预期的结果：

const selectTagElement= document.getElementById('select-tag');
const selectDefaultSegmentElement= document.getElementById('select-default-segment');
selectTagElement.onchange = function() {
    console.log('select tag value: ', this.value);
    for(let i = 0; i < selectDefaultSegmentElement.children.length; i++) {
        console.log('is disabled ', this.value === selectDefaultSegmentElement.children.item(i).value)
        if (this.value === selectDefaultSegmentElement.children.item(i).value) {
            selectDefaultSegmentElement.children.item(i).setAttribute('disabled', true);
        } else {
            selectDefaultSegmentElement.children.item(i).removeAttribute('disabled');
        }
    }
}

对于纯 html 和 vanilla javascript 中的示例，您可以查看以下代码并尝试一下：

 const segmentationDefaultElement = document.getElementById('segment-defaults'); const addSegments = document.getElementById('add-segments'); addSegments.onchange = function() { for(let i = 0; i < segmentationDefaultElement.children.length; i++) { if (+event.target.value === i+1) { segmentationDefaultElement.children.item(i).setAttribute('disabled', true); } else { segmentationDefaultElement.children.item(i).removeAttribute('disabled'); } } }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> </head> <body> <select name="add-segments" id="add-segments"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <select name="segment-defaults" id="segment-defaults"> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> <option value="4">Four</option> <option value="5">Five</option> </select> </body> </html>

Answer 2

我在下面为您分享了一个示例代码。

HTML

<select id="disability">
  <option value="false">Set Enable</option>
  <option value="true">Set Disable</option>
</select>

<select id="option">
  <option value="option-1">Option 1</option>
  <option value="option-2">Option 2</option>
</select>

JS

var disabilitySelect = document.getElementById('disability');
var optionSelect = document.getElementById('option');

disabilitySelect.onchange = function() {
  if(this.value === 'true') {
    optionSelect.setAttribute('disabled', true);
  } else {
    optionSelect.removeAttribute('disabled');
  }
}

此处示例： https://codepen.io/yasgo/pen/YzGzVZa

Select 选项在一个下拉菜单中禁用另一个选项？

问题描述

2 个解决方案

解决方案1
1 2020-11-26 17:11:48

解决方案2
0 2020-11-26 16:47:09

Select 选项在一个下拉菜单中禁用另一个选项？

问题描述

2 个解决方案

解决方案1 1 2020-11-26 17:11:48

解决方案2 0 2020-11-26 16:47:09

解决方案1
1 2020-11-26 17:11:48

解决方案2
0 2020-11-26 16:47:09