Dynamic select

I have two select boxes

<select onchange="showAlignment(this)">
<option value="one">1</option>
<option value="two">2</option>

</select>
<select>
<option id="One">1</option>
<option id="Two">2</option>
<option id="Three">3</option>
<option id="Four">4</option>
</select>

When an option is selected, i want to run a function to remove an option from the 2nd group
Is this right?

function showAlignment(select) {
   if(select.options[select.selectedIndex].getValue("one"))
   {
   document.getElementById("Three").style.display = "none";
	}
}

Hi there lurtnowski,

try it like this…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled Document</title>

<style media="screen">
.hide {
    display: none;
 }
</style>

</head>
<body><!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled Document</title>

<style media="screen">
.hide {
    display: none;
 }
</style>

</head>
<body>

 <select>
  <option value="">options one</option>
  <option value="one">1</option>
  <option value="two">2</option>
 </select><select>
  <option value="">options two</option>
  <option value="one">1</option>
  <option value="two">2</option>
  <option value="three">3</option>
  <option value="four">4</option>
 </select>

<script>
( function( d ) {
   'use strict';
   
   var sel = d.querySelectorAll( 'select' );
   
   sel[0].addEventListener( 'change',
      function() {
         if ( this.value === 'one' ) {
              sel[1].options[3].classList.add( 'hide' );
	      }
         else {
              sel[1].options[3].classList.remove( 'hide' );
	      }
      }, false );
}( document ));
</script>

</body>
</html>

coothead

2 Likes

ok, ran into a problem trying to get this on my site
heres the function

<script>
( function( d ) {
   'use strict';
   
   var sel = d.querySelectorAll( 'select' );
   
   sel[6].addEventListener( 'change',
      function() {
		  console.log('Test');
         if ( this.value === 'zero' ) {
              sel[7].options[1].classList.add( 'hide' );
			  console.log("True");
	      }
         else {
              sel[7].options[1].classList.remove( 'hide' );
	      }
      }, false );
}( document ));
</script>

the result


when I make a selection in the width box, test appears in the console.
So the event is fired, but why does the 2nd option stay in the next select box?
shouldn’t left dissapear?
I noticed hide doesn’t appear in the element inspector, but if I manually add display:none, it goes away

Can you please show us what the HTML looks like for the Select and option elements too?

he4res the plugin

my select boxes

<select class="form-control" id="Orientation" required name="Width">
<option value="">Select</option>
<option value="100">100%</option>
<option value="50">50%</option>
<option value="33">33%</option>
<option value="25">25%</option>
</select>	

  <select name="webmenu" id="webmenu">
    <option value="1" data-image="../images/alignment_0.png">&nbsp;&nbsp;None</option>
    <option value="1" data-image="../images/alignment_1.png">&nbsp;&nbsp;Left</option>
    <option value="2" data-image="../images/alignment_2.png">&nbsp;&nbsp;Right</option>
    <option value="1" data-image="../images/alignment_3.png">&nbsp;&nbsp;Left</option>
    <option value="3" data-image="../images/alignment_4.png">&nbsp;&nbsp;Center</option>
    <option value="4" data-image="../images/alignment_5.png">&nbsp;&nbsp;Right</option>
    <option value="1" data-image="../images/alignment_6.png">&nbsp;&nbsp;Left</option>
    <option value="5" data-image="../images/alignment_7.png">&nbsp;&nbsp;Center-Left</option>
    <option value="2" data-image="../images/alignment_8.png">&nbsp;&nbsp;Center-Right</option>
    <option value="6" data-image="../images/alignment_9.png">&nbsp;&nbsp;Right</option>
  </select>	

the script

( function( d ) {
   'use strict';
   
   var sel = d.querySelectorAll( 'select' );
   
   sel[6].addEventListener( 'change',
      function() {
		  console.log('Test');
         if ( this.value === '100' ) {
              sel[7].options[1].classList.add( 'hide' );
			  console.log("True");
	      }
         else {
              sel[7].options[1].classList.remove( 'hide' );
	      }
      }, false );
}( document ));

result, as you can see from the console, the function fires, but the option doessn’t go away.

The selectors you are using look to be far too brittle, capable of breaking if anything about the number of selectors changes.

I have some test code working where the orientation and webmenu are referenced by the unique id instead. Give that a try and see if there’s any improvement there.

(function(d) {
    "use strict";

    function isAHundred(option) {
        return option.value === "100";
    }
    function changeOrientationHandler(evt) {
        var option = evt.target;
        var webmenu = d.querySelector("#webmenu");
        webmenu.classList.toggle("hide", isAHundred(option));
    }
    var orientation = d.querySelector("#Orientation");
    orientation.addEventListener("change", changeOrientationHandler);
}(document));

test code: https://jsfiddle.net/3mg4pzqf/2/

2 Likes

Oopsie, ran into a problem
It was working fine when I was not using the plugin to allow images in the select box

I think that error means that the 2nd select box (the plugin converted into a

<ul>

and thats wht there is no snd select box, heres a screenie of it when I inspect the element


Thou ght it was just a simple

document.getElementsByTagName('li')[2].className += " hide";

to get the 2nd li to dissapear, but I was mistaken


Thanks

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>The HTML5 Herald</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">
  <style>
.hide {
    display: none;
 }
  .dd-selected-text {line-height:1.4em !important}
  </style>
</head>
<body>
<select id="Width">
<option></option>
<option value="100">100%</option>
<option>50%</option>
<option>33%</option>
<option>25%</option>

</select>
    <select id="myDropdown">
        <option value="0" data-imagesrc="images/Alignment_0.png">None</option>
        <option value="1" data-imagesrc="images/Alignment_1.png">Left</option>
        <option value="2" data-imagesrc="images/Alignment_2.png" >Right</option>
        <option value="3" data-imagesrc="images/Alignment_3.png">Left</option>
        <option value="4" data-imagesrc="images/Alignment_4.png">Center</option>
        <option value="5" data-imagesrc="images/Alignment_5.png">Right</option>
        <option value="6" data-imagesrc="images/Alignment_6.png">Left</option>
        <option value="7" data-imagesrc="images/Alignment_7.png">Center-Left</option>
        <option value="7" data-imagesrc="images/Alignment_8.png">Center-Right</option>
        <option value="8" data-imagesrc="images/Alignment_9.png">Right</option>
    </select>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <script type="text/javascript" src="https://cdn.rawgit.com/prashantchaudhary/ddslick/master/jquery.ddslick.min.js" ></script>
 <script>
	$('#myDropdown').ddslick({
});
</script>
<script>
( function( d ) {
   'use strict';
   
   var sel = d.querySelectorAll( 'select' );
   
   sel[0].addEventListener( 'change',
      function() {
         if ( this.value === '100' ) {
              sel[1].options[3].classList.add( 'hide' );
	      }
         else {
              sel[1].options[3].classList.remove( 'hide' );
	      }
      }, false );
}( document ));
</script>
	</body>
	</html>
```,

Yes, that’s exactly the “brittle” that I was mentioning before, and recommended changes to make things less brittle.

oh, I was looking at your example. how do I make it so that the whole select doest get hidden.
If I give each option an id, can I only add the class to those?

so your code is working great (no errors)
But when 100% is selected from the first dropdown, the second select box dissapears. Is there a way to make all the options dissapear except the first (so they can only make 1 selection?)
when 50% is selected I want all but 2 options gone.
33% would result in all but 3 options,
and lastly the 25% would only result in 4 options left
Heres my (slightly modified code

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>The HTML5 Herald</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">
  <style>
.hide {
    display: none;
 }
  .dd-selected-text {line-height:1.4em !important}
  </style>
</head>
<body>
<select id="Width">
<option></option>
<option value="100">100%</option>
<option>50%</option>
<option>33%</option>
<option>25%</option>

</select>
    <select id="myDropdown">
        <option value="0" data-imagesrc="images/Alignment_0.png">None</option>
        <option value="1" data-imagesrc="images/Alignment_1.png">Left</option>
        <option value="2" data-imagesrc="images/Alignment_2.png" >Right</option>
        <option value="3" data-imagesrc="images/Alignment_3.png">Left</option>
        <option value="4" data-imagesrc="images/Alignment_4.png">Center</option>
        <option value="5" data-imagesrc="images/Alignment_5.png">Right</option>
        <option value="6" data-imagesrc="images/Alignment_6.png">Left</option>
        <option value="7" data-imagesrc="images/Alignment_7.png">Center-Left</option>
        <option value="7" data-imagesrc="images/Alignment_8.png">Center-Right</option>
        <option value="8" data-imagesrc="images/Alignment_9.png">Right</option>
    </select>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <script type="text/javascript" src="https://cdn.rawgit.com/prashantchaudhary/ddslick/master/jquery.ddslick.min.js" ></script>
 <script>
	$('#myDropdown').ddslick({
});
</script>
<script>
(function(d) {
    "use strict";

    function isAHundred(option) {
        return option.value === "100";
    }
    function changeOrientationHandler(evt) {
        var option = evt.target;
        var myDropdown = d.querySelector("#myDropdown");
        myDropdown.classList.toggle("hide", isAHundred(option));
    }
    var orientation = d.querySelector("#Width");
    orientation.addEventListener("change", changeOrientationHandler);
}(document));
</script>
	</body>
	</html>
	

thanks

You’ll need to provide more explicit details about what you want showing when each option is selected.
(I want you to practice your ability to give useful details. There is still much ambiguity.)

sure, sorry for not explaining adequatelly,
so with the first select box (where the options are 100%, 50%, 33%, and 25%) are to select a width.
The 2nd select is to select the alignment.
So If a width of 100% is selected, only 1 alignment (None) would be available.
So If a width of 50% is selected, only 2 alignments (Left, Right) would be available.
So If a width of 33% is selected, only 3 alignments (Left, Center, Right) would be available.
So If a width of 25% is selected, only 4 alignments (Left, Center-Left, Center-Right, Right) would be available.
Is that a better explanation?

1 Like