Question

我想在许多div中使用自动选择选择框。如何像软件方法一样多次使用自动选择。我不想为选择框类名写很多时间。我的例子：选择框自动选择不在第二个div（divTwo）中工作，然后单击divTwo的选项更改divOne的选项。不单独更改单击的div。

$( document ).ready(function() {
    $(".a1").change(function(){
        $(".a2 option").eq($(this).prop("selectedIndex")).prop("selected", "selected");
        $(".a3 option").eq($(this).prop("selectedIndex")).prop("selected", "selected");
    });
    $(".a2").change(function(){
        $(".a1 option").eq($(this).prop("selectedIndex")).prop("selected", "selected");
        $(".a3 option").eq($(this).prop("selectedIndex")).prop("selected", "selected");
    });

    $(".a3").change(function(){
        $(".a1 option").eq($(this).prop("selectedIndex")).prop("selected", "selected");
        $(".a2 option").eq($(this).prop("selectedIndex")).prop("selected", "selected");
    });
});

<div class="divOne">
    <select class=" a1" >
        <option >Option1</option>
        <option >Option2</option>
        <option >Option3</option>
    </select>
    <select class=" a2" >
        <option >Option1</option>
        <option >Option2</option>
        <option >Option3</option>
    </select>
    <select class=" a3" >
        <option >Option1</option>
        <option >Option2</option>
        <option >Option3</option>
    </select>
</div>
<div class="divTwo">
    <select class=" a1" >
        <option >Option1</option>
        <option >Option2</option>
        <option >Option3</option>
    </select>
    <select class=" a2" >
        <option >Option1</option>
        <option >Option2</option>
        <option >Option3</option>
    </select>
    <select class=" a3" >
        <option >Option1</option>
        <option >Option2</option>
        <option >Option3</option>
    </select>
</div>

Answer 1

$([selector])

这总是返回一个与选择器匹配的jquery对象数组。你认为它返回一个由3个元素组成的数组。但是它返回了一个包含6个元素的数组。

$(".a1 option")

这将返回<select class="a1">下所有选项的数组（6）。这些都是DIV ONE和DIV TWO。由于它们在HTML中的顺序，DIV ONE下的选项首先列在元素数组中。

$(".a1 option").eq($(this).prop("selectedIndex"))

这将为DIV ONE创建一个新的jQuery对象＆gt; A1＆gt;项[的selectedIndex]。这是因为上述原因。因此，在每次更改时，总是选择DIV ONE选项（因为它们是带有选择器.a1选项的选项数组中的第一个）。

<强>解

您需要指定要在哪个div下自动进行更改。我想你想要同一个div下的所有选择器同时改变。

我使用$(this).parent()来指定div。然后找到所需的选择选项。

请参阅fiddle。

选择框自动选择用于html中的许多div内容

1 个答案: