jQuery 到 select 选项中包含 "selected" 的特定 select

Question

我有一个包含多项选择的表单，该表单动态预填充了选项。

我只想突出显示（更改背景颜色）选项列表中具有 "selected" 的选项。

表格：

<form name="MyForm" method="POST" action="/myaction">
    <select>
        <option value="--">--</option>
        <option value="1">111</option>
        <option value="2" selected>222</option>
        <option value="3">333</option>
    </select>

    <select>
        <option value="--">--</option>
        <option value="1">A1</option>
        <option value="2">B2</option>
        <option value="3">C3</option>
    </select>

    <select>
        <option value="--">--</option>
        <option value="A" selected>AAA</option>
        <option value="B">BBB</option>
        <option value="C">CCC</option>
    </select>
</form>

我当前的 jQuery 突出显示所有选择，而不仅仅是选项中具有 "selected" 的选择。在上面的示例中，应该只突出显示第一个和最后一个选择...

$('#MyForm').find('select > option:selected').parent().css('background-color', 'rgba(216,255,1,0.15)');

知道如何解决吗？

Answer 1

您在 name="MyForm" 中使用表单元素，但在 jquery 中使用 'MyForm' 作为表单标记的 ID 选择器 $('#MyForm'). Either assignid="MyForm"`或使用下面的 jquery

$('[name="MyForm"]').find('select > option:selected').parent().css('background-color', 'rgba(216,255,1,0.15)');

Answer 2

var selectedItems= $('[name="MyForm"]').find('select > option:selected');    
selectedItems.each(function(obj,ind){    
     $(obj).parent().css('background-color', 'rgba(216,255,1,0.15)');
});

Answer 3

您似乎在寻找属性 selected:

$('[name=MyForm] [selected]').parent().css('background-color', 'rgba(216,255,1,0.15)');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="MyForm" method="POST" action="/myaction">
    <select>
        <option value="--">--</option>
        <option value="1">111</option>
        <option value="2" selected>222</option>
        <option value="3">333</option>
    </select>

    <select>
        <option value="--">--</option>
        <option value="1">A1</option>
        <option value="2">B2</option>
        <option value="3">C3</option>
    </select>

    <select>
        <option value="--">--</option>
        <option value="A" selected>AAA</option>
        <option value="B">BBB</option>
        <option value="C">CCC</option>
    </select>
</form>

Answer 4

这很简单。将 option:selected 替换为 option[selected] 并将属性 id="MyForm" 添加到表单中。

你可以在这个fiddle中看到代码。

jQuery 到 select 选项中包含 "selected" 的特定 select

jQuery to select specific selects that have "selected" in the option

jquery

jquery-selectors