Question

我们在<option>的所有<select>上都有数据值属性（请参阅下面的示例）。

在页面加载时，我将有权访问其中一个值，我需要遍历所有<option>值并找到可用于进一步处理的<option>。我们正试图用jQuery做到这一点。

我如何遍历<select>以在数据值属性中找到值<option>？

＆＃13;

option {
  width: 100px
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selections" size="5">
<option data-value="1" value="a">A</option>
<option data-value="2" value="b">b</option>
<option data-value="3" value="c">c</option>
<option data-value="4" value="d">d</option>
<option data-value="5" value="e">e</option>
<option data-value="6" value="f">f</option>
<option data-value="7" value="g">g</option>
</section>

＆＃13;

目标是采用数据值=＆＃34; 5＆＃34;并添加数据选择=＆＃34; true＆＃34; （见下文）

＆＃13;

option {
width: 100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selections" size="5">
    <option data-value="1" value="a">A</option>
    <option data-value="2" value="b">b</option>
    <option data-value="3" value="c">c</option>
    <option data-value="4" value="d">d</option>
    <option data-value="5" value="e" data-selected="true">e</option>
    <option data-value="6" value="f">f</option>
    <option data-value="7" value="g">g</option>
    </section>

＆＃13;

Answer 1

使用[attribute]选择器

$(".selections").find("[data-value='5']").prop("selected", true).data("selected", "true");

option {
width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selections" size="5">
    <option data-value="1" value="a">A</option>
    <option data-value="2" value="b">b</option>
    <option data-value="3" value="c">c</option>
    <option data-value="4" value="d">d</option>
    <option data-value="5" value="e">e</option>
    <option data-value="6" value="f">f</option>
    <option data-value="7" value="g">g</option>
</select>

Answer 2

您可以使用.attr()功能为您的选项添加数据属性。

$(".selections").find("[data-value='5']").prop("selected", true).attr("data-selected", "true");

工作演示here

如何根据data-attribute返回选项？

2 个答案: