javascript - 根据其他选择更改一个表单选择选项

标签 javascript forms

我正在使用这段代码。我正在使用内部脚本。我能够看到第一个选择;但第二次选择的值不会因第一次选择而改变。我可能缺少一些基本的东西。请帮忙。请提供一个工作示例。

<!DOCTYPE html>
<html>
<body>
<script>
$(document).ready(function() {
    $("#type").change(function() {
        var val = $(this).val();
        if (val == "item1") {
            $("#size").html("<option value='test'>item1: test 1</option><option 
                value='test2'>item1: test 2</option>");
        } else if (val == "item2") {
            $("#size").html("<option value='test'>item2: test 1</option><option 
                value='test2'>item2: test 2</option>");
        } else if (val == "item3") {
            $("#size").html("<option value='test'>item3: test 1</option><option 
                value='test2'>item3: test 2</option>");
        }
    });

});
</script>
<select id="type">
    <option value="item1">item1</option>
    <option value="item2">item2</option>
    <option value="item3">item3</option>
</select>
<select id="size">
    <option value="">-- select one -- </option>
</select>
</body>
</html>

最佳答案

问题是你没有导入jquery
将以下 html 代码复制并粘贴到您的 html 页面中

<html>

<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#type").change(function() {

        var val = $(this).val();
        if (val == "item1") {
            $("#size").html("<option value='test'>item1: test 1</option><option value='test2'>item1: test 2</option>");
        } else if (val == "item2") {
            $("#size").html("<option value='test'>item2: test 1</option><option value='test2'>item2: test 2</option>");
        } else if (val == "item3") {
            $("#size").html("<option value='test'>item3: test 1</option><option value='test2'>item3: test 2</option>");
        }
    });

});
</script>

</head>
<body>

<select id="type">
    <option value="item1">item1</option>
    <option value="item2">item2</option>
    <option value="item3">item3</option>
</select>
<select id="size">
    <option value="">-- select one -- </option>
</select>
</body>
</html>

关于javascript - 根据其他选择更改一个表单选择选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17227026/

相关文章:

Javascript:谷歌地图标记列表中的 href 错误

javascript - Azure 移动服务 HTML 5 用户身份验证在 IE(.NET 后端)中显示 Windows 安全对话框

php - 使用 javascript 或 PHP 如何使用下拉列表或文本框中的值。

javascript - FullCalendar 事件不保持颜色变化

html - HTTP 响应不触发文件下载使用 jQuery 表单插件

html - 如何使用 Slim 模板设置 'required' 等 HTML5 属性

javascript - Jquery 下拉动态表单问题

javascript - 最后一个值未显示在 charts.js-library 的条形图中

HTML CSS 表单 - 如何使表单在​​页面上居中?

javascript - 使用 getElementsByTagName 选择标签