optgroup阻止jquery执行

Question

当添加optgroup以进行选择时，以下Jquery行似乎不会生效。

$('#desire_candidate > option').removeAttr("selected");

HTML

<select name="desire_candidate" id="desire_candidate">
      <option id="selected1" style="color:gray" selected>Select below</option>
         <!-- Categorize select options -->
         <optgroup label="Web">
             <option class="desire_candidate" value="Entry level Frontend Developer">Entry level Frontend Developer</option>
             <option class="desire_candidate" value="Entry level Backend Developer">Entry level Backend Developer</option>
         </optgroup>

         <optgroup label="Mobile">
            <option class="desire_candidate" value="Entry level iOS Developer">Entry level iOS Developer</option>
             <option class="desire_candidate" value="Entry level Android Developer">Entry level Android Developer</option>
         </optgroup>
</select>

Javascript

// Previous button
$('#previous1').click(function(){

    // Hide current stage
    $('#step2').css('display', 'none');

    // Display previous stage
    $('#step1').css('display', 'block');

    // Reset selected option to default
    $('#desire_candidate > option').removeAttr("selected");
    //$('#selected1').Attr("selected");


    });

Answer 1

因为选项不再是复选框的直接子选项。

>符号意味着下面的下一个选择器是前一个选择器的直接后代。

您可以使用#desire_candidate option作为选择器，它将查找select中的任何option。或只在optgroup中查找选项的#desire_candidate > optgroup > option

使用最适合你需要的哪一个。

CSS子组合器参考