根据多个其他选择选项更改选择选项

时间:2021-02-15 16:23:11

标签: javascript html jquery html-select

这是我到目前为止的代码 https://jsfiddle.net/7vz59c0e/ ,它不起作用,因为我无法打印 html(来自 javascript)以对其他 javascript 做出反应。

我想要的是选项 2 来影响选项 3 中显示的选项,并且仅在选择选项 1 时显示。

$(document).ready(function () {
    $("#options").change(function () {
        var val = $(this).val();
        if (val == "1") {
            $("#options2").html("<label for='options2'>Options2:</label><select id='options2' name='options2' required><option value=''></option><option value='4'>Option 1</option><option value='5'>Option 2</option><option value='6'>Option 3</option></select><br><label for='options3'>Options3:</label><select id='options3' name='options3' required></select>");
        } else if (val == "2") {
            $("#options2").html("<label for='options2'>Options2:</label><select id='options2' name='options2' required><option value=''></option><option value='7'>Option 1</option><option value='8'>Option 2</option><option value='9'>Option 3</option></select><br><label for='options3'>Options3:</label><select id='options3' name='options3' required></select>");
        } else if (val == "3") {
            $("#options2").html("<label for='options2'>Options2:</label><select id='options2' name='options2' required><option value=''></option><option value='10'>Option 1</option><option value='11'>Option 2</option><option value='12'>Option 3</option></select><br><label for='options3'>Options3:</label><select id='options3' name='options3' required></select>");
        }
    });
});
$(document).ready(function () {
    $("#options2").change(function () {
        var val = $(this).val();
        if (val == "4") {
            $("#option3").html("<option value=''></option><option value='13'>Option 1</option><option value='14'>Option 2</option><option value='15'>Option 3</option>");
        } else if (val == "5") {
            $("#option3").html("<option value=''></option><option value='16'>Option 1</option><option value='17'>Option 2</option><option value='18'>Option 3</option>");
        } else if (val == "6") {
            $("#option3").html("<option value=''></option><option value='19'>Option 1</option><option value='20'>Option 2</option><option value='21'>Option 3</option>");
        } 
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="options">Options:</label>
<select id="options" name="options" required>
<option value=""></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<div id="options2">
</div>

0 个答案:

没有答案
相关问题