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 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> s值更改为数字，这样可以简单地解决#answer-X，其中X是选项值，而且只是在没有任何目标时＆＃34; - 选择类型 - ＆＃34;被选中。

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

3 个答案: