2017-08-06 48 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>