Jquery第二个更改未启动

Question

我遇到了一个问题，我的第二个事件侦听器似乎没有正确执行。我希望用下拉列表中的每个选择来更新div描述中的文本，但文本只在第一次更改时发生了更改。之后，尽管下拉菜单正确启动，但文本在任何时候都不会随着任何更改而更新。我觉得这一定是选择器的问题，但我不能100%确定，而且我对Jquery还很陌生。我在下面附上了小提琴，展示了我的问题。非常感谢您的帮助。https://jsfiddle.net/042swvdx/4/

HTML:

<h1 style='text-align:center;'>Accu Tab Submittal Builder</h1>
<br>
<div style='text-align:center;'>
    <div id='descrip'>
        <p>Please select a chlorinator model</p>
    </div>
    <form id='first'>
        <select>
            <option selected disabled>Chlorinator Models</option>
            <option value='Accu-tab 2075'>Accu-Tab 2075</option>
            <option value='Accu-tab 2150'>Accu-Tab 2150</option>
            <option value='Accu-tab 2300'>Accu-Tab 2300</option>
            <option value='Accu-tab 2600'>Accu-Tab 2600</option>
            <option value='POWER PRO 3075'>3075 Power Pro</option>
            <option value='POWER PRO 3150'>3150 Power Pro</option>
            <option value='POWER PRO 3530'>3530 Power Pro</option>
            <option value='POWER PRO 30600'>30600 Power Pro</option>
            <option value='POWER PRO 361000'>361000 Power Pro</option>
            <option value='POWER PRO 481200'>481200 Power Pro</option>
        </select>
        <select id='second' style="display:none;">
            <option selected disabled>Select Flow</option>
            <option value='Gravity'>Gravity</option>
            <option value='Standard'>Standard</option>
        </select>
        <select id='third' style='display: none;'>
            <option value='1 PH'>1 Phase</option>
            <option value='3 PH'>3 Phase</option>
        </select>
        <select id='fourth' style="display:none;">
            <option disabled selected>Control Type</option>
            <option>No Control</option>
            <option>WEG</option>
            <option>VFD</option>
        </select>
        <button style='display: none'>Submit</button>

JQUERY:

$("#first").change(function() {
    $("#descrip").html("<p>Please select the flow type for this system.</p>");
    $("#second").show();
});
$("#second").change(function() {
    $("#descrip").html('<p>Please select the phase of the motor for this unit.</p>');
    $("#third").show();
});
$("#third").change(function() {
    $("#descrip").html("<p>Please select units control type.</p>");
    $("#fourth").show();
});
$("#fourth").change(function() {
    $("#descrip").html("");
    $("button").show();
});

Answer 1

问题不在于第二个事件没有启动。您的第一个"更改"事件设置为<form id='first'>标记。这意味着，每次用户更改表单标记中的内容时，它都会引发一个新事件。我认为您希望将第一个事件设置为第一个select元素。我更改了您第一次选择的id，如下所示：

<form> <select id='first'>

请在这里查看JSFiddle的工作版本。