JQuery dynamic fields (ruby page)

Question

I have this page from Redmine (an open source management program) in which I have to show only some options in drop down list 2, depending on what is currently selected on drop down list 1.

Here is the code I made so far, using jQuery

if($("#CategoryID1").val()=== "#CategoryValue1"){
    $("#DynamicCategory option[value='categoryOptions1']").hide();
    $("#DynamicCategory option[value='categoryOptions2']").hide();
    $("#DynamicCategory option[value='categoryOptions3']").hide();
    $("#DynamicCategory option[value='categoryOptions4']").show();
    $("#DynamicCategory option[value='categoryOptions5']").show();
}else if($("CategoryID1").val()=== "CategoryValue2"){
    $("#DynamicCategory option[value='categoryOptions1']").show();
    $("#DynamicCategory option[value='categoryOptions2']").show();
    $("#DynamicCategory option[value='categoryOptions3']").hide();
    $("#DynamicCategory option[value='categoryOptions4']").hide();
    $("#DynamicCategory option[value='categoryOptions5']").hide();
    }
}

As you can see, I have two dropdown lists, one of them (CategoryID1) will have some options, and these options will define what appears in the dropdownlist called "DynamicCategory".

As you can imagine, this is not the best code, since I have 5 options in category 1, and 1 line for every single value in DynamicCategory . For this reason, I have two questions.

Question 1: Is there a way for me to hide() multiple values at once?

For example, I tried this and it didn't work:

$("#DynamicCategory option[value='categoryOptions1' ,'categoryOptions2', 'categoryOptions3']").hide();

Question 2: Is there a way for me to make the second category un-selectable by the user until he chooses something in category 1? The fields should be unavaiable/empty when the page is first loaded.

Answer 1

Question 1:

Using the jQuery ID Selector and Element Selector , you can chain the tag names in order to select all of the option elements of the first category selector and hide them:

$( "#CategoryID1 options" ).hide();

If you applied a class to only those options:

<select id="CategoryID1" name="select">
  <option class="first_category" value="Tests">Tests</option> 
  <option class="first_category" value="Development">Development</option>
  <option class="first_category" value="PMO">PMO</option>
</select>

then you could use the jQuery Class Selector :

$( 'first_category' ).hide();

Question 2:

Add the disabled property to your <select> input:

<select id="DynamicCategory" disabled>   ...    </select>

Or using the jQuery prop() method, you can disable DOM elements on document ready:

$(document).ready( function() {
  $("#DynamicCategory").prop( "disabled", true );
});

Remove the disabled property from the <select> input on change of the first, using change() :

$( "#CategoryID1" ).change(function() {
  $("#DynamicCategory").prop( "disabled", false );
});