CODEWITHSUNDEEP
javascript
user14288707
user14288707

Reputation:

Select option in one dropdown disable option in another?

I'm running a rails app and would like to disable the options in a drop-down based on what is selected in a previous drop-down

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

Upvotes: 0

Views: 59

Answers (2)

Titus Sutio Fanpula
Titus Sutio Fanpula

Reputation: 3613

I don't know how it's rails template work, but If I'm not wrong, maybe this code below will be help you to resolve your problem.

You dont get some result, it's because you put your id in p tag, not in select tag and yeah, you can use this code below for your 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>

After that, you can use this vanilla javascript code, to get result as you expected:

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');
        }
    }
}

For an example in pure html and vanilla javascript, you can look at the code below and try it:

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>

Upvotes: 1

Yasin B. Kalkan
Yasin B. Kalkan

Reputation: 267

I've shared a sample code for you below.

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');
  }
}

Example here: https://codepen.io/yasgo/pen/YzGzVZa

Upvotes: 0

Related Questions