如何根據下拉選擇啓動jQuery對話框

Question

我對編程非常陌生，並希望能夠得到一些有關此問題的幫助。我的網頁上有六個項目的下拉列表。我想打開與每個下拉選項關聯的唯一對話框。我不想在打開頁面時顯示任何對話框，但保持隱藏狀態，直到用戶從下拉菜單中選擇一個選項。我給每個對話框一個「隱藏答案」的類，以便在頁面打開時隱藏它們。我擁有的是在頁面刷新時顯示對話框，而不是在選擇下拉項時。我正在使用jQuery UI。

<script> 
    $(document).ready(function() { 
     $(".hide-answer").dialog({ 
      autoOpen: false 
     }); 

     var selPermit = document.getElementById("permit"); 
     if (selPermit.selectedIndex === 1) { 
      $("#answer-1").dialog('open'); 
     } 
     else if (selPermit.selectedIndex === 2) { 
      $("#answer-2").dialog('open'); 
     } 
     else if (selPermit.selectedIndex === 3) { 
      $("#answer-3").dialog('open'); 
     } 
     else if (selPermit.selectedIndex === 4) { 
      $("#answer-4").dialog('open'); 
     } 
     else if (selPermit.selectedIndex === 5) { 
      $("#answer-5").dialog('open'); 
     } 
     else if (selPermit.selectedIndex === 6) { 
      $("#answer-6").dialog('open'); 
     }; 

    }); 
</script> 

     <div id="permitForm" class="grouped"> 
      <h2>Do I Need A Permit?</h2> 
      <select name="types" id="permit"> 
       <option selected="selected" value="">-- select type --</option> 
       <option value="First">First</option> 
       <option value="Second">Second</option> 
       <option value="Third">Third</option> 
       <option value="Fourth">Fourth</option> 
       <option value="Fifth">Fifth</option> 
       <option value="Sixth">Sixth</option> 
      </select> 
     </div> 
     <div class="hide-answer" id="answer-1" title="First Condition"> 
      <p>This is the description of when a first condition is needed.</p> 
     </div> 
     <div class="hide-answer" id="answer-2" title="Second Condition"> 
      <p>This is the description of when a second condition is needed.</p> 
     </div> 
     <div class="hide-answer" id="answer-3" title="Third Condition"> 
      <p>This is the description of when a third condition is needed.</p> 
     </div> 
     <div class="hide-answer" id="answer-4" title="Fourth Condition"> 
      <p>This is the description of when a fourth condition is needed.</p> 
     </div> 
     <div class="hide-answer" id="answer-5" title="Fifth Condition"> 
      <p>This is the description of when a fifth condition is needed.</p> 
     </div> 
     <div class="hide-answer" id="answer-6" title="Sixth Condition"> 
      <p>This is the description of when a sixth condition is needed.</p> 
     </div> 
    </div> 
</div> 

Answer 1

我想試試這個：https://jsfiddle.net/Twisty/pnd51hau/1/

HTML

<div id="permitForm" class="grouped"> 
    <h2>Do I Need A Permit?</h2> 
    <select name="types" id="permit"> 
    <option selected="selected" value="">-- select type --</option> 
    <option value="1">First</option> 
    <option value="2">Second</option> 
    <option value="3">Third</option> 
    <option value="4">Fourth</option> 
    <option value="5">Fifth</option> 
    <option value="6">Sixth</option> 
    </select> 
</div> 
<div class="hide-answer" id="answer-1" title="First Condition"> 
    <p>This is the description of when a first condition is needed.</p> 
</div> 
<div class="hide-answer" id="answer-2" title="Second Condition"> 
    <p>This is the description of when a second condition is needed.</p> 
</div> 
<div class="hide-answer" id="answer-3" title="Third Condition"> 
    <p>This is the description of when a third condition is needed.</p> 
</div> 
<div class="hide-answer" id="answer-4" title="Fourth Condition"> 
    <p>This is the description of when a fourth condition is needed.</p> 
</div> 
<div class="hide-answer" id="answer-5" title="Fifth Condition"> 
    <p>This is the description of when a fifth condition is needed.</p> 
</div> 
<div class="hide-answer" id="answer-6" title="Sixth Condition"> 
    <p>This is the description of when a sixth condition is needed.</p> 
</div> 
</div> 
</div> 

JQuery用戶界面

$(document).ready(function() { 
    $(".hide-answer").dialog({ 
    autoOpen: false 
    }); 

    $("#permit").change(function() { 
    $(".hide-answer").dialog("close"); 
    var sel = $(this).val(); 
    console.log("Opening #answer-" + sel); 
    $("#answer-" + sel).dialog('open'); 
    }); 
}); 

你沒有結合到任何一個事件;因此，進行選擇不會導致任何操作或正在執行的功能。對value屬性的更改允許我們在對話框的選擇器中使用它。

您也可以使代碼更小：

$("#permit").change(function() { 
    $("#answer-" + $(this).val()).dialog('open'); 
    }); 
}); 

編輯

我注意到，你可以做一個選擇第二次打開當前對話框時。這導致了一系列的對話。要修復，請將$(".hide-answer").dialog("close");添加到.change()事件中。這將確保他們都先關閉，然後纔打開所選的那個。

Answer 2

您可以使用.change()方法來檢查選擇了哪個選項。下面是代碼：

$(document).ready(function() { 
    $(".hide-answer").dialog({ 
     autoOpen: false 
    }); 
    $('#permit').change(function(){ 
     var option = $('option:selected', this).data('open'); 
     $('#'+option).dialog('open'); 
    }); 
}); 

你的下拉應該是這樣的：

<select name="types" id="permit"> 
     <option selected="selected" value="">-- select type --</option> 
     <option value="First" data-open="answer-1">First</option> 
     <option value="Second" data-open="answer-2">Second</option> 
     <option value="Third" data-open="answer-3">Third</option> 
     <option value="Fourth" data-open="answer-4">Fourth</option> 
     <option value="Fifth" data-open="answer-5">Fifth</option> 
     <option value="Sixth" data-open="answer-6">Sixth</option> 
    </select> 

Answer 3

正如已經被別人提及，dialog()需要jQuery UI的。反正你可以做到這一點根本不用jQuery UI的，就像這樣：
（注：推論，你必須用造型來獲得對話框的樣子與jQuery UI）

<script> 
$(document).ready(function() { 
    var permit = $('#permit'), 
     dialogs = $('.hide-answer'); 
    permit.change(function() { 
    dialogs.hide(); 
    $('#answer-' + permit.val()).show(); 
    }).change(); 
}); 
</script> 
<div id="permitForm" class="grouped"> 
    <h2>Do I Need A Permit?</h2> 
    <select name="types" id="permit"> 
     <option selected="selected" value="">-- select type --</option> 
     <option value="1">First</option> 
     <option value="2">Second</option> 
     <option value="3">Third</option> 
     <option value="4">Fourth</option> 
     <option value="5">Fifth</option> 
     <option value="6">Sixth</option> 
    </select> 
</div> 
<div class="hide-answer" id="answer-1" title="First Condition"> 
    <p>This is the description of when a first condition is needed.</p> 
</div> 
<div class="hide-answer" id="answer-2" title="Second Condition"> 
    <p>This is the description of when a second condition is needed.</p> 
</div> 
<div class="hide-answer" id="answer-3" title="Third Condition"> 
    <p>This is the description of when a third condition is needed.</p> 
</div> 
<div class="hide-answer" id="answer-4" title="Fourth Condition"> 
    <p>This is the description of when a fourth condition is needed.</p> 
</div> 
<div class="hide-answer" id="answer-5" title="Fifth Condition"> 
    <p>This is the description of when a fifth condition is needed.</p> 
</div> 
<div class="hide-answer" id="answer-6" title="Sixth Condition"> 
    <p>This is the description of when a sixth condition is needed.</p> 
</div> 

注意，我改變了<option>價值觀以允許簡單地址#answer-X，其中X是選項值，並且僅在選擇「 - 選擇類型 - 」時不針對任何東西。