如何通过 JQuery select <select> 没有 html 的元素

Question

我有以下 html select 个元素

    <select  id="options1" title="prd_name" name="options">
       <option value="optiona">Option A</option>
       <option value="optionb">Option B</option>
       <option value="optionc">Option C</option>
    </select>
    <select  id="options2" title="prd_name" name="options"> </select>
    <select  id="options3" title="prd_name" name="options"> </select>
    <select  id="options4" title="prd_name" name="options"> </select>

只有 id="options1" 的第一个 select 元素中有选项标签，其余 select 元素为空。我想要 select 那些空的 select 元素，这样我就可以在其中填充选项，而无需触及第一个 select 元素，其中已经有选项。我怎样才能做到这一点，尤其是通过 Jquery?

Answer 1

您可以使用选择器select:empty；或者你可以使用 select:not(:has(option))

console.log($("select:empty"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<select id="options1" title="prd_name" name="options">
  <option value="optiona">Option A</option>
  <option value="optionb">Option B</option>
  <option value="optionc">Option C</option>
</select>
<select id="options2" title="prd_name" name="options"></select>
<select id="options3" title="prd_name" name="options"></select>
<select id="options4" title="prd_name" name="options"></select>

Answer 2

试试这个

var $select = $("select").filter(function () {
         return !$(this).find("option").length;
       });
console.log($select);

$select 将为您提供所有 select 框，但带有选项的元素除外然后你可以遍历 $select 并在其上执行任何任务

如何通过 JQuery select <select> 没有 html 的元素

How to select <select> elements with no html in them through JQuery

html

javascript

jquery

select

jquery-selectors