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'>标记。这意味着每次用户更改表单标记内的某些内容时，它都会触发一个新事件。我想你想把你的第一个事件设置为第一个选择元素。我改变了你的第一个选择的id：

<form> <select id='first'>

在JSFiddle上查看here工作版本。

Jquery第二次改变没有解雇

1 个答案: