Give all options a class

I have

						  <select name="alignment" id="alignment" class="form-control" required>
							  <option value="" disabled>Select Width</option>
							  <option value="" disabled>100% Options</option>
							  <option value="0">None</option>
							  <option value="" disabled>50% Options</option>
							  <option value="1">Left</option>
							  <option value="2">Right</option>
							  <option value="" disabled>33% Options</option>
							  <option value="3">Left</option>
							  <option value="4">Center</option>
							  <option value="5">>Right</option>
							  <option value="" disabled>25% Options</option>
							  <option value="6">Left</option>
							  <option value="7">Center-Left</option>
							  <option value="8">>Center-Right</option>
							  <option value="9">Right</option>
						  </select>		

Im trying to give each option a class of hide except the first, it this close?

    function hideOptions(select) {
        var options = d.getElementById("alignment").options;
        options.forEach(function (option) {
            option.classList.add("hide");
        });
    }
	

Yes, that’s close. The forEach method has an index parameter too, so you can use that to help you skip the first one.

1 Like

Although, instead of using JavaScript to give all options a class, a better approach exists using CSS.

You can use CSS to give all of those options the presentation you were wanting to use a class with, then use CSS’s first-element selector to remove that presentation from the first option.

option:first-of-type {
    color: inherit;
}
option {
    color: purple;
}
1 Like

I am trying to go through your code to create a dynamic select without using ddslick which somehow makes the select element not submit to the next page, so I found an alternartive which doesn’;t effect the markup.
So im trying to create a a function to loop through each option to make them dissapear (give them a class)
Then, l,ater I can remove that class depending on which option is selllected like you had here


But first things first, so Im trying to make all the options dissapear from

 <select name="alignment" id="alignment" class="form-control" required>
							  <option value="" disabled>Select Width</option>
							  <option value="" disabled>100% Options</option>
							  <option value="0">None</option>
							  <option value="" disabled>50% Options</option>
							  <option value="1">Left</option>
							  <option value="2">Right</option>
							  <option value="" disabled>33% Options</option>
							  <option value="3">Left</option>
							  <option value="4">Center</option>
							  <option value="5">>Right</option>
							  <option value="" disabled>25% Options</option>
							  <option value="6">Left</option>
							  <option value="7">Center-Left</option>
							  <option value="8">>Center-Right</option>
							  <option value="9">Right</option>
						  </select>

How do I make the foreach skip the {0} index

    function hideOptions(select) {
        var options = d.getElementById("alignment").options;
        options.forEach(function (option) {
            option.classList.add("hide");
        });
    }

The second argument in forEach is the current index forEach(currentvalue, index, array)

MDN forEach

Not tested

function hideOptions(select) {
        var options = d.getElementById("alignment").options;
        options.forEach(function (option, index) {
            if (index > 0) {
                option.classList.add("hide");
            }
        });
    }

or possibly

function hideOptions(select) {
        const [first, ...rest] = d.getElementById("alignment").options;
        rest.forEach(function (option) {
              option.classList.add("hide");
        });
    }
1 Like

OK
Im not sure what the second one does [first, …rest}
So am going with the first solution but when the page loads, am getting
Uncaught TypeError: options.forEach is not a function
heres the script


<script language="javascript">
(function(d) {
    "use strict";
	var alignment = d.getElementById("alignment");
	function hideOptions(select) {
			var options = d.getElementById("alignment").options;
			options.forEach(function (option, index) {
				if (index > 0) {
					option.classList.add("hide");
				}
			});
		}    

hideOptions(alignment);
}(document));

</script>

the id os the select element is right
doesn’t options holdn an array of all the options in it?

Edit:

Ok two possible options. It seems an HTMLOptionsCollection doesn’t have access to a forEach method.

(function(doc) {

	function hideOptions(select) {
		const options = doc.querySelectorAll(select)

		options.forEach(function (option, index) {
			if (index > 0) {
				option.classList.add('hide')
			}
		})
	}

  hideOptions('#alignment option');
}(window.document));

or a legacy way of doing things that in theory should work in IE as well.

(function(doc) {

  function hideOptions(select) {

    // slice call will copy the HTMLOptionsCollection to an array
    const options = [].slice.call(doc.getElementById(select).options)

    options.forEach(function (option, index) {
      if (index > 0) {
        option.classList.add('hide')
      }
    })
  }

hideOptions('alignment')
}(window.document))

well I got good/bad news
baddd news is nothing happened (((the options are still there)


But the console gives no errors so thats the good news, but do the pictures not allow them to dissapear?

It worked in my test, so not sure

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
  <style>
    .hide {
      display: none;
    }
  </style>
</head>
<body>
  <select name="alignment" id="alignment" class="form-control" required>
    <option value="" disabled>Select Width</option>
    <option value="" disabled>100% Options</option>
    <option value="0">None</option>
    <option value="" disabled>50% Options</option>
    <option value="1">Left</option>
    <option value="2">Right</option>
    <option value="" disabled>33% Options</option>
    <option value="3">Left</option>
    <option value="4">Center</option>
    <option value="5">>Right</option>
    <option value="" disabled>25% Options</option>
    <option value="6">Left</option>
    <option value="7">Center-Left</option>
    <option value="8">>Center-Right</option>
    <option value="9">Right</option>
  </select>

<script>
/*(function(doc) {

	function hideOptions(select) {
		const options = doc.querySelectorAll(select)

		options.forEach(function (option, index) {
			if (index > 0) {
				option.classList.add('hide')
			}
		})
	}

  hideOptions('#alignment option');
}(window.document));*/

(function(doc) {

  function hideOptions(select) {

    // slice call will convert the HTMLOptionsCollection to an array
    const options = [].slice.call(doc.getElementById(select).options)

    options.forEach(function (option, index) {
      if (index > 0) {
        option.classList.add('hide')
      }
    })
  }

hideOptions('alignment')
}(window.document))
</script>
</body>
</html>

just a thought, but is the hide class being over-ruled, by a more specific css definition?

if you test the hide class with important! does that make a difference?

.hide {
      display: none!important;
 }

thank you

Great :smile: