select要素のオプションをプログラムで無効にする方法はありますか？

-1

以下のスニペットで、ユーザーが最初のドロップダウンから "Economy"または "First"クラスを選択すると、2番目のドロップダウンで対応するシートオプションのみを有効にします。したがって、ユーザーが最初のドロップダウンで「エコノミー」クラスを選択した場合、最初のクラスの座席オプションは2番目のドロップダウンで無効にする必要があります（逆も同様です）。 <select>のこれらの<option>をプログラムで無効にする方法はありますか？もしそうなら、どうですか？select要素のオプションをプログラムで無効にする方法はありますか？

var $x=document.getElementsByClassName("b").innerHTML; 
 
var $y=document.getElementsByClassName("economy").innerHTML; 
 
var $z=document.getElementsByClassName("first").innerHTML; 
 
function select() { 
 
    console.log("$x ==> ", $x); 
 
    console.log("$y ==> ", $y); 
 
    console.log("$z ==> ", $z); 
 
} 
 
select();

.fontstyle { 
 
    font-family: "calibri"; 
 
}

<html> 
 

 
<head> 
 
    <title>Ticket reservation form</title> 
 
</head> 
 

 
<body> 
 
    <form> 
 
     <table> 
 
      <tr> 
 
       <td colspan="2"> 
 
        <h1 class="fontstyle"> AIRTICKET RESERVATON FORM</h1></td> 
 
      </tr> 
 
      <tr> 
 
       <td><span class="fontstyle">Customer Name :</span></td> 
 
       <td> 
 
        <input type="text" placeholder="ENTER NAME" /> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td><span class="fontstyle"> Specify your Class :</span> 
 
       </td> 
 
       <td> 
 
        <select id="s1"> <!--select tag starts--> 
 
         <option class="b">Select</option> 
 
         <option class="b" onchange="select()">Economy</option> 
 
         <option class="b" onchange="select()">FirstClass</option> 
 
        </select> <!--select tag closed--> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td><span class="fontstyle"> Select your Seat :</span> 
 
       </td> 
 
       <td> 
 
        <select> 
 
         <option>Select</option> 
 
         <option disabled>Economy class </option> <!--economy class seats--> 
 
         <option class="economy">1</option> 
 
         <option class="economy">2</option> 
 
         <option class="economy">3</option> 
 
         <option class="economy">4</option> 
 
         <option class="economy">5</option> 
 
         <option disabled>First class </option> <!-- first class seats--> 
 
         <option class="first">6</option> 
 
         <option class="first">7</option> 
 
         <option class="first">8</option> 
 
         <option class="first">9</option> 
 
         <option class="first">10</option> 
 
        </select> 
 
       </td> 
 
      </tr> 
 
     </table> 
 
    </form> 
 
</body> 
 

 
</html>

出典

2017-03-28 ABHISHEK VERMA

のようなものである必要がありますが、セットアップであろうもののように偽と真の「有効」というタグがありました。 –

@ israel.zinc "enabled"のようなものはありません。無効になっています。 https://www.w3.org/TR/html5/forms.html#the-option-element – Bunkerbuster

をご覧ください。こんにちは、StackOverflowへようこそ。私は可能な限りこの問題を解決しました。まず、文章をより明確にするようにしました。レビューしてください。また、JS/CSSブロックでマークアップを使用したり、「getElementsByClassName」のスペルを間違えたり、低価値のアラートを表示したり、字下げしたりすることなく、間違ったHTMLコメント構文を使用していた場合でも、今後投稿する前に確認し、コードを慎重に確認してください。幸運と幸せなコーディング！ –

それはこの

<select id="selector" onchange="myFunction(this.options[this.selectedIndex].getAttribute('class'));"> 
<option>Select</option> 
<option disabled>Economy class </option> //economy class seats 
<option class="economy">1</option> 
<option class="economy" >2</option> 
<option class="economy" >3</option> 
<option class="economy" >4</option> 
<option class="economy" >5</option> 
<option disabled>First class </option> // first class seats 
<option class="first" >6</option> 
<option class="first" >7</option> 
<option class="first" >8</option> 
<option class="first" >9</option> 
<option class="first" >10</option> 
</select> 

<script> 
function myFunction(val) { 
    var op = document.getElementById("selector").getElementsByClassName(val); 
    for (var i = 0; i < op.length; i++) { 
     op[i].disabled = true; 
    } 
} 
</script>

出典

2017-03-28 08:12:22 Bunkerbuster

select要素のオプションをプログラムで無効にする方法はありますか？

答えて

関連する問題