基盤の選択ボックスオプションイベント

Question

私は基礎の選択ボックス要素に取り組んでおり、選択した単一のオプションを開いて指定されたモーダルを開くようにしたいと考えています。

たとえば、私がSaabを選択した場合、特定のモーダルを開くことができます。 Audiを選択すると、Audi固有の別のモーダルが開きます。以下は私のコードスニペットです。

<select> 
    <option value="" disabled selected>Select your option</option> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
</select> 

Answer 1

これは、このコードを確認してください、これは..あなたの問題

// JSコード

$(document).ready(function(){ 

     var dialog1 = $("#dialog-form1").dialog({ 
      autoOpen: false, 
      height: 400, 
      width: 350, 
      modal: true 
      }); 
     var dialog2 = $("#dialog-form2").dialog({ 
      autoOpen: false, 
      height: 400, 
      width: 350, 
      modal: true 
      }); 

     $('#selectId').on('change', function() { 
     dialog1.dialog("close"); 
     dialog2.dialog("close"); 
     var selectVal = $("#selectId option:selected").val(); 
     if(selectVal == 'saab'){ 
      dialog1.dialog("open"); 
      // code 
     } 
     else if(selectVal == 'audi'){ 
      dialog2.dialog("open"); 
      //code 
     } 
    }); 
}); 

// htmlコード

<select id="selectId"> 
    <option value="" disabled selected>Select your option</option> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
</select> 

<div id="dialog-form1"> 
</div> 

<div id="dialog-form2" > 
</div> 

を解決することができます