Question

我正在构建一个简单的表单，其中输入字段的启用取决于用户在选择列表中的选择。我正在使用一些小的javascript。

我让它为一个条件工作，但表格中有2个条件。
第一个是一个选择下拉列表，根据两个答案中的一个，出现2个输入字段。
秒是根据选择列表中选择的一个选项（即“其他”）出现的输入字段

这是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>

抱歉但我的html代码通常更长，但它一直被编辑器切断。我认为这是因为它遇到了一个结束div？你可以在jsfiddle

中看到完整的代码

这是js：

    $(document).ready(function () {

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

    $('#select').change(function () {
        if ($('#select option:selected').text() == "I'm a first-time user") {
            $('.form-div2').show();
            $('.form-div3').show();
        } else if ($('#select option:selected').text() == "I would like to renew or upgrade") {
            $('.form-div2').hide();
            $('.form-div3').hide();
        }
    });

    $('#select').change(function () {
        if ($('#select option:selected').text() == "Other") {
            $('.form-div42').show();
        } else if ($('#select option:selected').text() !== "Other") {
            $('.form-div42').hide();
        }
    });
});

这里是小提琴：http://jsfiddle.net/4EmE5/2/

希望你能帮忙

Answer 1

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

对您的代码进行以下更改

HTML，

<div class="form-div1">
    <label>Select your profile</label>
    <br />
    <select id='user'>
        <option value="option1">I'm a first-time user</option>
        <option value="option2">I would like to renew or upgrade</option>
    </select>
</div>
<div class="form-div2">
    <label>SEN</label>
    <br />
    <input type "text" name="input1" class="input1" />
</div>
<div class="form-div3">
    <label>Email Address</label>
    <br>
    <input type "text" name="input2" class="input2">
</div>
<div class="form-div4">
    <label>Select your product</label>
    <br>
    <select id='product'>
        <option value="option1">Product1</option>
        <option value="option2">Other</option>
    </select>
</div>
<div class="form-div42">
    <label>Specify your product</label>
    <br>
    <input type "text" name="input2" class="input2">
</div>
<div class="form-div5">
    <label>Select your license</label>
    <br />
    <select>
        <option value="option1">25 users</option>
        <option value="option2">50 users</option>
    </select>
</div>

JS：

$('.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");

});

DEMO

Answer 2

应更改标记，以便为要附加事件的每个id元素添加select个属性。这允许代码识别哪个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>

JS小提琴： http://jsfiddle.net/4EmE5/9/

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

2 个答案:

DEMO