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

我会试试这个：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="answerswer-1" title="First Condition">
  <p>This is the description of when a first condition is needed.</p>
</div>
<div class="hide-answer" id="answerswer-2" title="Second Condition">
  <p>This is the description of when a second condition is needed.</p>
</div>
<div class="hide-answer" id="answerswer-3" title="Third Condition">
  <p>This is the description of when a third condition is needed.</p>
</div>
<div class="hide-answer" id="answerswer-4" title="Fourth Condition">
  <p>This is the description of when a fourth condition is needed.</p>
</div>
<div class="hide-answer" id="answerswer-5" title="Fifth Condition">
  <p>This is the description of when a fifth condition is needed.</p>
</div>
<div class="hide-answer" id="answerswer-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()事件中。这将确保它们都先关闭，然后只打开选定的一个。

您可以使用.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="answerswer-1">First</option>
        <option value="Second" data-open="answerswer-2">Second</option>
        <option value="Third" data-open="answerswer-3">Third</option>
        <option value="Fourth" data-open="answerswer-4">Fourth</option>
        <option value="Fifth" data-open="answerswer-5">Fifth</option>
        <option value="Sixth" data-open="answerswer-6">Sixth</option>
    </select>

正如其他人已经提到的，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="answerswer-1" title="First Condition">
    <p>This is the description of when a first condition is needed.</p>
</div>
<div class="hide-answer" id="answerswer-2" title="Second Condition">
    <p>This is the description of when a second condition is needed.</p>
</div>
<div class="hide-answer" id="answerswer-3" title="Third Condition">
    <p>This is the description of when a third condition is needed.</p>
</div>
<div class="hide-answer" id="answerswer-4" title="Fourth Condition">
    <p>This is the description of when a fourth condition is needed.</p>
</div>
<div class="hide-answer" id="answerswer-5" title="Fifth Condition">
    <p>This is the description of when a fifth condition is needed.</p>
</div>
<div class="hide-answer" id="answerswer-6" title="Sixth Condition">
    <p>This is the description of when a sixth condition is needed.</p>
</div>

请注意，我将<option>的值更改为数字，这允许简单地寻址#answer-X，其中X是选项值，并且在选择"--select type--"时不针对任何内容。