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

「無効」属性を使用する必要があります。たとえば ：

<option value="FRUIT" disabled>FRUIT</option> 
<option value="GRADES" disabled>GRADES</option> 

あなたのページにjQueryのを使用して、その下のコードに従っている場合：

<script> 
    function myFunction() { 
    document.getElementById("mySelect").disabled = true; 
    } 
</script> 

HTMLコードは次のようになりますように：

<option id="mySelect" value="FRUIT" disabled>FRUIT</option> 
<option id="mySelect" value="GRADES" disabled>GRADES</option> 

Answer 2

<select name="selectField"> <option value="FRUIT" disabled>FRUIT</option> 
      <option value="MANGO"> 
       MANGO 
      </option> 
      <option value="APPLE"> 
      APPLE 
</option> 
      <option value="BANANA">BANANA</option> 

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

この1つhelps.justだけこれを試してみてください！

Answer 3

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オプションのようにする必要があり

はまだsubmittableです。