jquery - 找到第一个选择了第一个值的选择？答案

【问题标题】：jquery - finding the first select that has the first value selected?jquery - 找到第一个选择了第一个值的选择？
【发布时间】：2014-11-11 07:22:26
【问题描述】：

我有许多选择下拉菜单，所有的第一个值为空（即“”）。选择值为“”的第一个选择的最佳方法是什么？我一直在尝试类似

$j("[id*='user'] option[value='']").first().prop("selected", true);

但这是设置它而不是寻找一个匹配的。

（所有 id 都以 'user' 开头；我需要找到第一个具有空值的用户选择...）

【问题讨论】：

但是鉴于所有选择元素都有一个带有defaultSelected 属性的选项，您可能会发现这与查找第一个选择元素相同，而不管用户选择如何。

标签： jquery select jquery-selectors

【解决方案1】：

您需要使用 jquery 选择器开头，即[id^=startwithid] 以获取所有以用户开头的 id，请参见下面的代码

$j("[id^='user'] option[value=]:selected").first().parent();

或使用:has 的最佳方式，如下所示

$j("[id^='user']:has(option[value=]:selected)").first();

【讨论】：

这将给出选项的对象。不选择元素。

【解决方案2】：

既然要select元素，可以试试.has()

$j("[id*='user']").has('option[value=""]:selected').first()

试试

$("[id*='user']").has('option[value=""]:selected').first().css({
    "color": 'red',
    "border-color": 'green'
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="user-1">
  <option value="">Select</option>
  <option selected="selected">1</option>
</select>
<select id="user-2">
  <option value="">Select</option>
  <option selected="selected">1</option>
</select>
<select id="user-3">
  <option value="">Select</option>
  <option>1</option>
</select>
<select id="user-4">
  <option value="">Select</option>
  <option>1</option>
</select>
<select id="user-5">
  <option value="">Select</option>
  <option selected="selected">1</option>
</select>

【讨论】：

@aldanux 复制粘贴错误...已修复
+1 虽然这可行，但我在 Chrome 中的 select 颜色并没有改变（在 FF 中很好）。浏览器与select 样式不一致，所以我建议您更新您的示例以包括重新设置边框的样式（确实在 Chrome 中显示）例如：$("[id*='user']").has('option[value=""]:selected').first().css({'border-color':'red','color':'red'})
酷。有趣的是，在 Chrome (os-x) 中，CSS 颜色确实会改变，现在您也设置了边框 - 但不改变边框不会。奇怪（并且可能记录在某处）；）
@Moob 我的 chrome(windows 7) 在没有边框颜色的情况下工作正常

【解决方案3】：

您可以使用:has 选择器找到具有选项值"" 的选择：

$j("[id*='user']:has(option[value='']:selected)").first();

或

$j("[id*='user']:has(option[value='']:selected):eq(0)");

【讨论】：