Give all options a class

[lurtnowski]

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

[Paul_Wilkins]

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

[Paul_Wilkins]

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

[lurtnowski]

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

Dynamic select

There are many different ways to solve this particular issue. For example, all of the options could be removed from the HTML code with only the JavaScript generating what is needed. However, even though this is the JavaScript forum we must never lose sight of the no-JavaScript situations. But, Everyone has JavaScript, right? No they bloody well do not, as is demonstrated nicely at that link. It’s important that we accommodate people without it as much as possible. Another benefit of improving …

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

[rpg_digital]

@lurtnowski

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

[lurtnowski]

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?

[rpg_digital]

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

[lurtnowski]

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?

[rpg_digital]

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

[lurtnowski]

@rpg_digital

    .hide {
      display: none;
    }

thank you

[rpg_digital]

Great