Javascript 如何使用jQuery在更改时启用select下拉列表？

如何编辑该代码，使select2和select3在默认情况下处于禁用状态，并在上一个select上有选择或select上有选项（不包括“选择您的选项占位符”）时启用它

另外，在这段代码中，最后一个选项是在选择上一个选项时被选中的，我希望第一个选项占位符被选中，而不是“选择您的选项占位符”

下面是我的代码

<select name="select1" id="select1">
    <option value="" disabled selected>Select your option</option>
    <option value="1" option-id="1">Group A</option>
    <option value="2" option-id="2">Group B</option>
    <option value="3" option-id="3">Group C</option>
</select>

<select name="select2" id="select2">
 <option value="a" disabled selected option-id="a">Select your option</option>
    <option value="a" option-id="a">Select your option</option>
    <option value="1" option-id="1">Product 1 No Sizes</option>
    <option value="2" option-id="1">Product 2 Standard and large</option>
    <option value="3" option-id="2">Product 3 Small and Standard</option>
    <option value="4" option-id="2">Product 4 Standard and Large</option>
    <option value="5" option-id="3">Product 5 No Sizes</option>

</select>

<select name="select3" id="select3">
    <option value="a" disabled selected option-id="a">Select your option</option>

    <option value="bb" option-id="1" >Standard</option>

    <option value="bb" option-id="2" >Standard</option>
    <option value="cc" option-id="2" >Large</option>

    <option value="aa" option-id="3" >Small</option>
    <option value="bb" option-id="3" >Standard</option>

    <option value="bb" option-id="4" >Standard</option>
    <option value="cc" option-id="4" >Large</option>  

    <option value="cc" option-id="4" >Large</option>  

    <option value="cc" option-id="4" >Large</option>  

</select>

我要找的是这样的东西

当select2和3被禁用时，即使在启用占位符后，占位符也将默认被选中，而不是select上的最后一个选项，因此用户将被迫选择一个选项

谢谢

试试这个：

$（“选择2”）.attr（“禁用”、“禁用”）；
$（“#select3”）.attr（“已禁用”）；
$（文档）。在（“更改”上，“#选择1”，函数（事件）{
if（$（“#select1”）[0]。selectedIndex==0）{
$（“#select2”）.attr（“已禁用”）；
$（“#select3”）.attr（“已禁用”）；
$（“#select2”）[0]。selectedIndex=0；
$（“#select3”）[0]。selectedIndex=0；
}否则{
$（“#选择2”）.removeAttr（“禁用”）；
$（“#选择3”）.removeAttr（“禁用”）；
}
});

挑选
1.
2.
3.
4.
挑选
1.
2.
3.
4.
挑选
1.
2.
3.
4.
试试这个：


$（“选择2”）.attr（“禁用”、“禁用”）；
$（“#select3”）.attr（“已禁用”）；
$（文档）。在（“更改”上，“#选择1”，函数（事件）{
if（$（“#select1”）[0]。selectedIndex==0）{
$（“#select2”）.attr（“已禁用”）；
$（“#select3”）.attr（“已禁用”）；
$（“#select2”）[0]。selectedIndex=0；
$（“#select3”）[0]。selectedIndex=0；
}否则{
$（“#选择2”）.removeAttr（“禁用”）；
$（“#选择3”）.removeAttr（“禁用”）；
}
});

挑选
1.
2.
3.
4.
挑选
1.
2.
3.
4.
挑选
1.
2.
3.
4.
如果我正确理解您的要求。这应该可以完成工作。你不需要那种CSS


选择您的选项
A组
B组
C组
选择您的选项
产品1无尺码
产品2标准和大型
产品3小型和标准
产品4标准和大型
产品5无尺码
选择您的选项
标准
标准
大的
小的
标准
标准
大的
大的
大的


变量$select1=$（“#select1”），
$select2=$（“#select2”），
$select3=$（'#select3'），//我添加了那一行，但不确定它是否正确
$options_a=$select2.find（'option'），
$options_b=$select3.find（'option'）；//我加了那一行，但不确定它是否正确
$select1.on（'change'，function（）{
$select2.prop（“已禁用”，false）；
$select2.html（$options\u.filter（函数）（）{
return$（this.attr（'option-id'）===$select1.val（）||
$（this.attr（'option-id'）=“a”
}))
$select2.val（'a'）
} )
//我为select3添加了下面几行，但不确定它们是否正确
$select2.on（'change'，function（）{
$select3.prop（“已禁用”，false）；
$select3.html（$options\u b.filter（函数）（）{
return$（this.attr（'option-id'）===$select2.val（）||
$（this.attr（'option-id'）=“a”
}));
$select3.val（'a'）
} )
如果我正确理解您的要求。这应该可以完成工作。你不需要那种CSS


选择您的选项
A组
B组
C组
选择您的选项
产品1无尺码
产品2标准和大型
产品3小型和标准
产品4标准和大型
产品5无尺码
选择您的选项
标准
标准
大的
小的
标准
标准
大的
大的
大的


变量$select1=$（“#select1”），
$select2=$（“#select2”），
$select3=$（'#select3'），//我添加了那一行，但不确定它是否正确
$options_a=$select2.find（'option'），
$options_b=$select3.find（'option'）；//我加了那一行，但不确定它是否正确
$select1.on（'change'，function（）{
$select2.prop（“已禁用”，false）；
$select2.html（$options\u.filter（函数）（）{
return$（this.attr（'option-id'）===$select1.val（）||
$（this.attr（'option-id'）=“a”
}))
$select2.val（'a'）
} )
//我为select3添加了下面几行，但不确定它们是否正确
$select2.on（'change'，function（）{
$select3.prop（“已禁用”，false）；
$select3.html（$options\u b.filter（函数）（）{
return$（this.attr（'option-id'）===$select2.val（）||
$（this.attr（'option-id'）=“a”
}));
$select3.val（'a'）
} )
非常感谢，它非常有效，请再问一个问题。。。我想知道如果下拉列表3上没有实际值（不包括选择选项占位符），如何禁用它。。。例如，当选择C组->产品5无尺寸时，我想我可以使用if statment for$select3.length=1，但我不知道如何在这段代码中实现它，如果您再次帮助我，我将不胜感激。非常感谢SuxinoThanks，它工作得非常好，请再问一个问题。。。我想知道如何禁用下拉3，如果它没有真正的价值（排除在外）
var $select1 = $( '#select1' ),
    $select2 = $( '#select2' ),
    $select3 = $( '#select3' ), // I added that line but not sure if its correct

    $options_a = $select2.find( 'option' ),
    $options_b = $select3.find( 'option' ); // I added that line but not sure if its correct

$select1.on( 'change', function() {

  $select2.html( $options_a.filter( '[option-id="' + this.value + '"]' ) );
} ).trigger( 'change' );

// I added the next lines for select3 but not sure if they are correct
$select2.on( 'change', function() {
  $select3.html( $options_b.filter( '[option-id="' + this.value + '"]' ) );

} ).trigger( 'change' );