Question

你好我在这个论坛上寻找答案。我使用select元素来确定给定div的HTML。我尝试使用选项元素执行此操作但在阅读了一些对其他问题的回复之后被告知它不是跨浏览器友好的。我发现其中一些答案有效，但当我试图调整答案时，一切都崩溃了！我是Javascript的新手，下面看起来非常合乎逻辑！（我猜不是）。

<html>

<head>
    <script type="text/javascript">
        function changeFunc() {
            var selectedValue = selectBox.options[selectBox.selectedIndex].value;
            var y = document.getelementbyid("demo");
            if (selectedValue == "1") {
                y.innerhtml = "hello";
            } else if (selectedValue == "2") {
                y.innerhtml = "hello 1";
            } else if (selectedValue == "3") {
                y.innerhtml = "hello 2";
            } else if (selectedValue == "4") {
                y.innerhtml = "hello 3";
            }
        }
    </script>
</head>

<body>
    <select id="selectBox" onchange="changeFunc();">
        <option value="1">Option #1</option>
        <option value="2">Option #2</option>
        <option value="3">Option #3</option>
        <option value="4">Option #4</option>
    </select>
    <div id="demo"></div>
</body>

</html>

Answer 1

这就是你要找的东西：fiddle link

<html>
<body>

<select id="selectBox" onchange="return myFunction();">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
<option value="4">Option #4</option>
</select>
<div id="demo" ></div>
    <script>
function myFunction() {
    var ele = document.getElementById("selectBox");
    var selectedValue = ele.options[ele.selectedIndex].value;

    var y = document.getElementById("demo");
    if(selectedValue=="1"){
       y.innerHTML = "hello";
    }
    else if(selectedValue=="2"){
       y.innerHTML = "hello 1";
    }
    else if(selectedValue=="3"){
       y.innerHTML = "hello 2";
    }
    else if(selectedValue=="4"){
       y.innerHTML = "hello 3";
    }
}
    </script>
<body>
</html>

根据选定的下拉选项更改div的内部html

1 个答案: