时间戳

首页 > 解决方案 > 在一个下拉列表中选择选项禁用另一个选项？

javascript - 在一个下拉列表中选择选项禁用另一个选项？

问题描述

我正在运行一个 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>

标签： javascript

解决方案

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

你没有得到一些结果，这是因为你把你的 id 放在p标签中，而不是在select标签中，是的，你可以使用下面的代码作为你的 rails：

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

之后，您可以使用这个 vanilla 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>

推荐阅读