Блог

Главная - Вопросы по программированию - Выберите опцию в одном выпадающем списке, отключите опцию в другом?

Выберите опцию в одном выпадающем списке, отключите опцию в другом?

#javascript

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

Комментарии:

1. Можете ли вы предоставить свой HTML-код?

2. пожалуйста, добавьте «образец кода» в свой код

Ответ №1:

Я не знаю, как работает шаблон rails, но если я не ошибаюсь, возможно, этот приведенный ниже код поможет вам решить вашу проблему.

Вы не получаете никакого результата, это потому, что вы вводите свой идентификатор в 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>

После этого вы можете использовать этот ванильный код 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 и ванильном 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>

Ответ №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

Метки: ,