javascript - 如何启动基于下拉选择的 jQuery 对话框

Question

我对编程非常陌生，希望我能在这个问题上得到一些帮助。我的网页上有一个包含六个项目的下拉列表。我想打开一个与每个下拉选项相关的独特对话框。我不想在打开页面时显示任何对话框，而是将它们隐藏起来，直到用户从下拉菜单中选择一个选项。我给每个对话框 div 一个“隐藏答案”类，这样我就可以在页面打开时将它们隐藏起来。我所拥有的是在页面刷新时显示对话框，而不是在选择下拉项时显示对话框。我正在使用 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');
  });
});

您没有将任何内容绑定(bind)到事件；因此，做出选择不会导致任何操作或函数被执行。对 value 属性的更改允许我们在对话框的选择器中使用它。

您还可以缩小代码:

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

编辑

我注意到当当前对话框打开时您可以进行第二个选择。这导致了一系列对话。要修复此问题，请将 $(".hide-answer").dialog("close"); 添加到 .change() 事件中。这将确保它们首先全部关闭，然后仅打开所选的一个。