I am currently working on creating two select fields where, upon selecting an option in the first field, some options in the second field should be hidden. I have almost achieved this, but my script is unable to locate certain options in the first select field. When I manually add these options to the first field, it works, but only for that specific option. I require the script to hide options in the second select field based on the selection made in the first field.
The challenge lies in the fact that I am restricted from adding any classes or ids to the elements.
It seems like I may have made a mistake in how I am instructing the script to edit the elements, but I am unsure of an alternative approach.
HTML
<select name="NameOne">
<option value="First">Lorem Ipsum1</option>
<option value="Second">Lorem Ipsum2</option>
<option value="Third">Lorem Ipsum3</option>
<option value="CD">Dolor2</option>
</select>
<select name="NameTwo">
<option value="AB">Dolor1</option>
<option value="CD">Dolor2</option>
<option value="EF">Dolor3</option>
</select>
JS
$("select").change(function(){
if($(this).val() == "Second") {
$('option[value="CD"]', this).addClass('hidden');
} else {
$('option[value="CD"]', this).removeClass('hidden');
}
});
CSS
.hidden {
display: none
}
Any assistance would be greatly appreciated.