根据所选选项更改 div 的 JavaScript 函数 - 并不总是按预期工作?

标签 javascript onchange drop-down-menu

我有一个 JavaScript 函数(图片),当访问者从下拉菜单 (picture_type) 中选择一个选项 (onchange) 时,该函数就会被激活,然后更改 div (picture_div) 内的数据。

然而,div 中的数据并不总是反射(reflect)所选选项,例如:如果您选择“选择”选项...然后选择“URL”选项,则 div 不会反射(reflect)其应有的内容“网址”。

这是 JavaScript 函数以及相应的 HTML:

<script>
function picture() {
    var picture_type = document.getElementById('picture_type').value;
    if (picture_type == 2) {
        document.getElementById('picture_div').innerHTML = '<a href="predefined_pics.php">Click here</a> to select one.';
    }
    if (picture_type >= 1) {
        document.getElementById('picture_div').style.display = 'block';
    } else {
        document.getElementById('picture_div').style.display = 'none';
    }
}
</script>


<select id="picture_type" onchange="return picture();">
<option value="0" selected="selected">Upload</option>
<option value="1">URL</option>
<option value="2">Select</option>
</select>


<div id="picture_div" style="display: none;">
URL: <input name="url" type="text" style="width: 100%" />
</div>

如果你不明白我的意思,我建议你测试上面的代码并使用选项来更好地理解我。 :)

非常感谢所有帮助!

最佳答案

这是代码,试试这个

<html>
<head>
<script>
function picture() {
    var picture_type = document.getElementById('picture_type').value;
    if (picture_type == 2) {
        document.getElementById('picture_div').innerHTML = '<a href="predefined_pics.php">Click here</a> to select one.';
    }
    if(picture_type == 1) {
    document.getElementById('picture_div').innerHTML = 'URL: <input name="url" type="text" style="width: 100%" />';
    }
    if (picture_type >= 1) {
        document.getElementById('picture_div').style.display = 'block';
    } else {
        document.getElementById('picture_div').style.display = 'none';
    }
}
</script>
</head>
<body>

<select id="picture_type" onchange="return picture();">
<option value="0" selected="selected">Upload</option>
<option value="1">URL</option>
<option value="2">Select</option>
</select>


<div id="picture_div" style="display: none;">
URL: <input name="url" type="text" style="width: 100%" />
</div>
</body>
</html>

此致,

瓦兹

关于根据所选选项更改 div 的 JavaScript 函数 - 并不总是按预期工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4532611/

相关文章:

CSS 下拉菜单 - 悬停时不改变

asp.net - 请告诉我如何在 javascript 中访问 gridview 单元格的值

javascript - 如何使用 javascript 获取特定 url 的 Facebook 分享数

javascript - 注入(inject)器错误在 angular.js 中找不到模块?

javascript - 是否可以暂时卡住 HTML 元素的当前外观?

input - CodeMirror 6,如何在输入/更新/更改事件中获取编辑器值?

jquery - 如何通过 .change 触发器传递 html 元素引用

javascript - 查看源码中添加Js不起作用

javascript - 在更改选择框时搜索提交表单

Javascript OnMouseOver 没有属性