2017-08-06 115 views
0

我正在研究基礎中的選擇框元素,並試圖找出打開單個選定選項以打開指定的模式。在Foundation上選擇框選項事件

例如,如果我選擇了薩博,我想要一個特定的模式打開。如果我選擇了奧迪,奧迪的另一個模式應該打開。以下是我的代碼片段。

<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> 

回答

0

請該檢查這個代碼,這可能是解決問題,你

// 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>