How to launch a jQuery dialog based on dropdown selection

Question

I am very new to programming and hope that I can get some assistance with this problem. I have a drop down list of six items on my web page. I would like to open a unique dialog box associated with each drop down option. I do not want to display any of the dialog boxes when the page is opened, but keep them hidden until the user selects an option from the drop down menu. I've given each dialog div a class of "hide-answer" so I can keep them hidden when the page is opened. What I have is displaying the dialog on page refresh, not when the drop down item is selected. I am using 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

I would try this: 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');
  });
});

You had not bound anything to an event; therefore, making a selection resulted in no action, or function being executed. The change to the value attribute allows us to use that in the selector of the dialog.

You can also make the code smaller:

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

Edit

I noticed that you could make a 2nd selection when the current dialog was opened. This caused a cascade of dialogs. To fix, added $(".hide-answer").dialog("close"); to the .change() event. This will ensure they all get closed first and then only open the one that was selected.