Question

关于我： HTML经验：低 javascript经验：无 jQuery经验：无

我有以下代码，我想要的是让divText中的文本根据dropBox中选择的选项而改变。函数changeSelect将选项值与divText中显示的内容相关联。

这不适用于ie7或Chrome v38（工作笔记本，不允许更新到新版本的ie）。

我无法更改文本，但正在读取值（在dropBox中）。如果我脱掉了;

$(...);

在函数模板周围，dropBox不起作用/无法从默认选项中更改选择。

以下是我的代码;

<html>
<head>

<script>
/*  TEMPLATE CONTROL */

$(function changeSelect() {
if (document.getElementById("dropBox").value = "1") {
    document.getElementById("divText").innerhtml = "...";
} else if (document.getElementById("dropBox").value = "2") {
    document.getElementById("divText").innerhtml = "[HEADER] [DATE] [COUNT] ...";
} else if (document.getElementById("dropBox").value = "3") {
    document.getElementById("divText").innerhtml = "[HEADER] ...";
} else if (document.getElementById("dropBox").value = "4") {
    document.getElementById("divText").innerhtml = "NOTE [DATE] ...";
}
});


</script>

</head>

<body>

<!--TEMPLATE-->
<form action="">
<select type="text" id="dropBox" onchange="changeSelect()"> 
<option value="1">No Template</option>
<option value="2">Template 1</option>
<option value="3">Template 2</option>
<option value="4">Template 3</option>
</select>

<div id="divText">THIS TEXT SHOULD CHANGE</div>
<!--GENERATE BUTTON DOES NOTHING RIGHT NOW-->
<button onclick="">Generate</button>
</form>
<br>
<br>

</body>
</html>

Answer 1

这里有几个问题。首先，=用于值赋值，==应用于相等性比较。您需要将=语句中的if更改为==。

其次，该属性称为innerHTML，而不是innerhtml - 请注意大写，因为JS是case-senstitve。

最后，您的代码周围不需要$(..)。问题是由上述问题引起的。

试试这个：

function changeSelect() {
    if (document.getElementById("dropBox").value == "1") {
        document.getElementById("divText").innerHTML = "...";
    } else if (document.getElementById("dropBox").value == "2") {
        document.getElementById("divText").innerHTML = "[HEADER] [DATE] [COUNT] ...";
    } else if (document.getElementById("dropBox").value == "3") {
        document.getElementById("divText").innerHTML = "[HEADER] ...";
    } else if (document.getElementById("dropBox").value == "4") {
        document.getElementById("divText").innerHTML = "NOTE [DATE] ...";
    }
}

Example fiddle

正如您使用jQuery标记了您的问题，这是一个jQuery（也略微优化）版本：

<select type="text" id="dropBox"> 
    <option value="1">No Template</option>
    <option value="2">Template 1</option>
    <option value="3">Template 2</option>
    <option value="4">Template 3</option>
</select>

<div id="divText">THIS TEXT SHOULD CHANGE</div>

$(function() {
    var textOptions = ['...', '[HEADER] [DATE] [COUNT] ...', '[HEADER] ...', 'NOTE [DATE] ...'];
    $('#dropBox').change(function() {
        $('#divText').text(textOptions[parseInt($(this).val(), 10)]);
    });
});

Example fiddle

Answer 2

这就是jQuery方式的方法：

HTML：

<select type="text" id="dropBox">
    <option value="1">No Template</option>
    <option value="2">Template 1</option>
    <option value="3">Template 2</option>
    <option value="4">Template 3</option>
</select>
<div id="divText">THIS TEXT SHOULD CHANGE</div>

Javascript / jQuery：

$(function () {
    $("#dropBox").on("change", function () {
        switch ($(this).val()) {
            case "1":
                $("#divText").html("html/text for option 1");
                break;
            case "2":
                $("#divText").html("html/text for option 2");
                break;
            case "3":
                $("#divText").html("html/text for option 3");
                break;
            case "4":
                $("#divText").html("html/text for option 4");
                break;
        }
    });
});

JSFiddle

下拉框用于更改HTML中的文本

2 个答案: