Question

我正在研究基础中的选择框元素，我试图找出一个选定的选项打开以打开指定的模态。

例如，如果我选择了萨博，我希望打开一个特定的模态。如果我选择奥迪，那么奥迪的另一种模式应该会打开。以下是我的代码段。

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

在Foundation上选择框选项事件

1 个答案: