如何基于下拉选择启动 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');
  });
});

您没有将任何东西绑定到事件；因此，进行选择不会导致任何操作或功能正在执行。 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>s 的值更改为数字，这允许简单地寻址#answer-X，其中X 是选项值，并且在“--选择类型-- " 被选中。