使用javascript从下拉列表中禁用多个选项

Question

我在下拉列表中有以下选项。

<select>

   <option value="FRUIT">FRUIT</option>
   <option value="MANGO">MANGO</option>
   <option value="APPLE">APPLE</option>
   <option value="BANANA">BANANA</option>

  <option value="GRADES">GRADES</option>
   <option value="A">A</option>
   <option value="B">B</option>
   <option value="C">C</option>

</select>

我想永久禁用（只读）FRUIT和GRADES。如何使用javascript实现此结果？

Answer 1

您需要在select中使用optgroup。 <optgroup>用于对下拉列表中的相关选项进行分组。 Chek this。

你的例子应该是

optgroup[readonly] {
  background-color: #eeeeee;
  color: #555555;
}

<select>
      <optgroup label="FRUIT" readonly="readonly">        
        <option value="MANGO">MANGO</option>
        <option value="APPLE">APPLE</option>
        <option value="BANANA">BANANA</option>
      </optgroup>
      <optgroup label="GRADES" disabled="disabled">  
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
      </optgroup>
    </select>

readonly选项仍可提交。