用于选择具有空值属性的元素的 jQuery 选择器？

Posted 2023-03-05

【中文标题】用于选择具有空值属性的元素的 jQuery 选择器？

【英文标题】：jQuery selector for select elements with empty value attributes?

【发布时间】：2013-02-03 06:07:33

【问题描述】：

我正在使用下面的选择器来获取所有预先填充了值的表单输入。

$('input[value!=""]');

这很好用，所以我想我可以使用以下选择器将相同的逻辑应用于我的选择元素，尽管它似乎选择了 Chrome 中的所有选择元素。

$('select[value!=""]');

以下是表单上两种选择的示例：

<select name="phone2_type" id="phone2_type">
  <option value="">Select one:</option>
  <option value="HOME">Home</option>
  <option value="CELL">Cell</option>
  <option value="BUSN">Business</option>
</select>

<select name="state" id="state">
  <option value="">Select one:</option>
  <option value="XX">Outside USA/Canada</option>
  <option value="AL" selected="selected">Alabama</option>
  <option value="AK">Alaska</option>
  ...
</select>

我想选择第二个选择，因为它已经用 select="selected" 选择了一个值

【参考方案1】：

value 不是select 标签的属性。

所以你需要尝试一下：

var emptySelect = $('select').filter(function() 
                     return $.trim( $(this).val() ) == '';
                  );

【讨论】：

简单、干净、直接。更不用说它也适用于input。

【参考方案2】：

对于选择，您需要使用 JQuery 提供的特殊选择器：：selected

所以

$('#state option:selected').val()

是当前选择的值。

如果您需要对 select 元素本身执行某些操作，您可以执行以下操作：

$('#select option:selected').parents('select').dosomething(...)

【参考方案3】：

$('select').has('option[selected="selected"]')

将获得选择元素。 jsFiddle example。

【讨论】：

这在 FF 中对于动态添加的选择不起作用。这是一个已知的错误。这就是 JQuery 添加 :selected 的原因，它使用（我认为） .selectedIndex 选择元素的属性

@PaoloCasciello - OP 在哪里提到动态添加的选择？

你是对的，但他也没有提到浏览器.. ;) 让我们写出最有用的答案。 :)

两者都非常有帮助。自从他第一次发布以来，我就把它交给了 j08691，尽管我很高兴你指出了动态添加选择的问题@Paolo Casciello

匿名投反对票的懦夫，愿意发表评论吗？