Javascript jQuery-selectbox上的自动选择选项不'；t功能正常

我有2个选择框。当我在

selectbox1

上选择一个选项时，它会自动更改

selectbox2

上的相应值，而不考虑值和顺序

问题是，在几次尝试之后，代码工作正常。然后，即使我更改了

selectbox1

上的选项，它也不会更新

selectbox2

上的选项

复制该问题；从A到E，然后重复。

代码：

$（“.firstSelectBox”）.change（函数（e）{
var selectedOption=$（“选项：selected”，此选项）；
var idx=$（this.children（）.index（selectedOption）
var secChildIdx=$（“.secondSelectBox”）.children（）[idx]；
$（.secondSelectBox”）.find（“：selected”）.removeAttr（'selected'）；
$（secChildIdx）.attr（“选定”、“选定”）；
});

第一个选择框

选择一个
选择B
选择C
选择D
选择E


第二个选择框

选择1
选择2
选择3
选择4
选择5
不需要所有这些代码，只需使用：


$（“.firstSelectBox”）.change（函数（e）{
var selectedIndex=$（this）.get（0）.selectedIndex；
$（“.secondSelectBox”）.get（0.selectedIndex=selectedIndex；
});

第一个选择框

选择一个
选择B
选择C
选择D
选择E


第二个选择框

选择1
选择2
选择3
选择4
选择5
@DontVoteMeDown的答案肯定会有用，但您出现此问题的原因是
.prop
和
.attr
之间存在差异。两者都是相似的，但不是指相同的、相同的基础价值

如果将下面两行更改为使用
.prop
值而不是
.attr
，则代码将正常工作。请参见下面的工作代码示例

$(".secondSelectBox").find(":selected").removeAttr('selected'); // change to .removeProp
  $(secChildIdx).attr("selected", "selected"); // change to .prop


$（“.firstSelectBox”）.change（函数（e）{
var selectedOption=$（“选项：selected”，此选项）；
var idx=$（this.children（）.index（selectedOption）
var secChildIdx=$（“.secondSelectBox”）.children（）[idx]；
$（“.secondSelectBox”）.find（“：selected”）.removeProp（'selected'）；
$（secChildIdx）.prop（“选定”、“选定”）；
});

第一个选择框

选择一个
选择B
选择C
选择D
选择E


第二个选择框

选择1
选择2
选择3
选择4
选择5
您也可以使用
prop
选择选项


$（“.firstSelectBox”）.change（函数（e）{
var selectedIndex=$（this）.get（0）.selectedIndex；
$（'.secondSelectBox选项：eq（'+selectedIndex+'））.prop（'selected'，true）；
});

第一个选择框

选择一个
选择B
选择C
选择D
选择E


第二个选择框

选择1
选择2
选择3
选择4
选择5
回答得好。仅供参考，代码不工作的原因是OP使用了
.attr
而不是
.prop
。