如何根据下拉选择启动 jQuery 对话框

Question

我是编程新手，希望能得到一些帮助解决这个问题。我的网页上有一个包含六个项目的下拉列表。我想打开一个与每个下拉选项关联的独特对话框。我不想在页面打开时显示任何对话框，而是将它们隐藏起来，直到用户从下拉菜单中选择一个选项。我给每个对话框 div 一个 class of "hide-answer" 这样我就可以在打开页面时隐藏它们。我所拥有的是在页面刷新时显示对话框，而不是在选择下拉项时显示对话框。我正在使用 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 UI

$(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 是选项值，只是在“-- select 类型--”是 selected.

如何根据下拉选择启动 jQuery 对话框

How to launch a jQuery dialog based on dropdown selection

javascript

jquery-ui

drop-down-menu

dialog

selectedindex