这是我到目前为止的代码 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>