Javascript 条件形式取决于选择列表中的答案不起作用

我正在构建一个简单的表单，其中根据用户在选择列表中的选择启用输入字段。我正在为此使用一点javascript。

我让它在一个条件下工作，但表单中有两个条件。
第一个是选择下拉列表，根据两个答案中的一个，将显示两个输入字段
第二个是根据选择列表中选择的一个选项（即“其他”）显示的输入字段

以下是html：

<div class="form-div1">
<label>Select your profile</label>
<br>
<select>
    <option value="option1">I'm a first-time user</option>
    <option value="option2">I would like to renew or upgrade</option>
</select>

这是小提琴：

---

希望您能帮助

根据Master@Kevin Bowersox支持评论重新发布

对代码进行以下更改：

HTML

---

标记应更改为向要将事件附加到的每个

select

元素添加

id

属性。这允许代码识别应该附加到哪个

select

事件处理程序

我对脚本进行了一些改进。例如，不必比较所选选项的文本，只需检索

select

的值，并将其与与文本关联的适当值进行比较即可。此外，由于这些元素只是处于显示/隐藏状态，因此可以将布尔表达式传递给

toggle

，以有条件地切换相应元素的可见性。请注意，选择器可以通过提供以逗号分隔的选择器列表来选择多个元素

Javascript

$(document).ready(function () {

    $('.form-div2, .form-div3, .form-div4, .form-div5').show();
    $('.form-div42').hide();

    $('#user-type').change(function () {
        $('.form-div2, .form-div3').toggle($(this).val() == "option1");
    });

    $('#product').change(function () {
        $('.form-div42').toggle($(this).val() == "option2");
    });
});

HTML更改

    <select id="user-type">
        <option value="option1">I'm a first-time user</option>
        <option value="option2">I would like to renew or upgrade</option>
    </select>

    <select id="product">
        <option value="option1">Product1</option>
        <option value="option2">Other</option>
    </select>

我是第一次使用
我想续借或升级
产品1
其他

---

JS Fiddle:

由于您的br和input标记未关闭，代码被截断。您应该使用

和

Ok thx Jerodev，很好know@Pilot谢谢你让我知道这一点。我打开了OP的版本以供参考，我一定复制了该链接。你的链接更干净，所以删除mine@Pilot感谢你的赞美，但你不需要删除你的赞美。把它放在那里，也许有人会把它撕成碎片，你会学到一些新东西。或者你会从这笔交易中获得更多的代表。尽管有时很严厉，但建设性的批评是其中最有价值的部分。如果你没有“批评”我的答案，它仍然会有错误的小提琴。所以你做得更好了。我相信有人会把我的答案撕成碎片！谢谢师父，你教会了我们很多东西，真的很感激，非常感谢supportive@user3004304很高兴我能帮忙！

$('.form-div2, .form-div3, .form-div4, .form-div5').show();
$('.form-div42').hide();

$('#user').change(function () {
    var selected = $('#user option:selected').text();
    $('.form-div2, .form-div3').toggle(selected == "I'm a first-time user");
});

$('#product').change(function () {
    var selected = $('#product option:selected').text();
    $('.form-div42').toggle(selected == "Other");

});

$(document).ready(function () {

    $('.form-div2, .form-div3, .form-div4, .form-div5').show();
    $('.form-div42').hide();

    $('#user-type').change(function () {
        $('.form-div2, .form-div3').toggle($(this).val() == "option1");
    });

    $('#product').change(function () {
        $('.form-div42').toggle($(this).val() == "option2");
    });
});

    <select id="user-type">
        <option value="option1">I'm a first-time user</option>
        <option value="option2">I would like to renew or upgrade</option>
    </select>

    <select id="product">
        <option value="option1">Product1</option>
        <option value="option2">Other</option>
    </select>