JQuery动态字段（ruby页面）

Question

我有来自Redmine（一个开源管理程序）的这个页面，我必须在下拉列表2中只显示一些选项，具体取决于下拉列表1中当前选择的内容。

这是我到目前为止使用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();
    }
}

正如您所看到的，我有两个下拉列表，其中一个（CategoryID1）将有一些选项，这些选项将定义下拉列表中显示的名为＆＃34; DynamicCategory＆＃34;。

您可以想象，这不是最好的代码，因为我在类别1中有5个选项，在DynamicCategory中每个值都有1个行。出于这个原因，我有两个问题。

问题1：我是否可以同时hide()多个值？

例如，我试过这个并且它没有工作：

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

问题2：在他选择第1类的内容之前，有没有办法让用户无法选择第二类？首次加载页面时，字段应该是不可用的/空的。

Answer 1

问题1：

使用jQuery ID Selector和Element Selector，您可以链接标记名称，以便选择第一个类别选择器的所有选项元素并隐藏它们：

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

如果您仅将类应用于这些选项：

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

然后你可以使用jQuery Class Selector：

$( 'first_category' ).hide();

问题2：

将disabled属性添加到<select>输入中：

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

或者使用jQuery prop()方法，您可以在文档就绪时禁用DOM元素：

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

使用change()删除第一个更改时disabled输入的<select>属性：

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