javascript - 使用 JavaScript 进行 HTML 选择不起作用

Question

请检查 switch 语句

只有默认选项有效。

case x="Fin" 和 case x="Intercom" 无法正常工作。不知道为什么。谢谢!

代码:

    <p>Niche</p>
        <select name="niche" id="niche" onchange="FCM_niche()">
            <option value="empty" selected="">Select Niche</option>
            <option value="fin">FIN</option>
            <option value="intercom">Intercom</option>
        </select>

    <script type="text/javascript">
                function FCM_niche() {
                    var x = document.getElementById("niche").value;
                   switch (true) {
                        case x="FIN":
                           document.getElementById("FCM_select_niche").innerHTML = "FFFF";
                           break;
                        case x="Intercom":
                           document.getElementById("FCM_select_niche").innerHTML = "IIII";
                           break;
                        default:
                           document.getElementById("FCM_select_niche").innerHTML = "DDDD";
                      }
                };
            </script>
<div id="FCM_select_niche">        
</div>

Answer 1

请看一下这个 JS fiddle ，它显示了代码的工作版本: https://jsfiddle.net/jspruance/ebjnqt2r/

只需对您的 JS 进行一些小调整，您就可以启动并运行。

1) 将 switch 语句基于“x”变量:“switch(x)”

2) 每个案例都基于所选值(而不是显示的文本): 例如:案例“fin”

function FCM_niche() {
    var x = document.getElementById("niche").value;

    switch(x) {
        case "fin":
            document.getElementById("FCM_select_niche").innerHTML = "FFFF";
            break;
        case "intercom":
            document.getElementById("FCM_select_niche").innerHTML = "IIII";
            break;
        default:
            document.getElementById("FCM_select_niche").innerHTML =       "DDDD";
    }
};

这应该可以解决问题...祝你好运。