Jquery第二次更改未触发

我遇到了一个问题，我的第二个事件侦听器似乎没有正常执行。我希望使用下拉列表中的每个选择更新div descrip中的文本，但是文本仅在第一次更改时才会更改。之后，尽管下拉菜单正确启动，文本在任何时候都不会随着任何更改而更新。我觉得选择器一定有问题，但我不是100%确定，而且我对Jquery非常陌生。我已附上下面的小提琴，显示我的问题。非常感谢您的帮助。

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>

Accu选项卡提交文件生成器


请选择加氯器型号

氯化器模型
Accu标签2075
Accu标签2150
Accu标签2300
Accu表2600
3075电源专业
3150电源专业版
3530电源专业版
30600电源专业版
361000电源专业版
481200电源专业
选择流
重力
标准
一期
三相
控制类型
无法控制
WEG
变频调速
提交

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();
});

$（“#第一”）.change（函数（）{
$（“#descripp”）.html（“请选择此系统的流类型。
”；
$（“#秒”）.show（）；
});
$（“#秒”）.change（函数（）{
$（“#descripp”）.html（“请选择此装置的电机相位。
”）；
$（“#第三”）.show（）；
});
$（“#第三”）.更改（函数（）{
$（“#descripp”）.html（“请选择单位控制类型。
”）；
$（“#第四”）.show（）；
});
$（“#第四”）.更改（函数（）{
$（“#descrip”）.html（“”）；
$（“按钮”）.show（）；
});

问题不在于第二个事件没有触发。您的第一个“更改”事件设置为您的

标记。这意味着，每当用户更改表单标记中的某些内容时，它将触发一个新事件。我建议您将第一个事件设置为第一个select元素。我更改了您第一次选择的id，如下所示：

<form> <select id='first'>

在JSFIDLE上查找工作版本