没有从下拉列表中传递正确的值来触发 javascript function

Question

我有一个下拉列表，其中包含值“3 周视图”、“6 周视图”、“12 周视图”。 然后使用此下拉列表根据所选值触发 javascript function。 我遇到的问题是，无论我 select 是什么下拉项，它都只传递“三”的值。这可能很明显，我以前从未这样做过。

HTML
<center>View:</center>
                <select class="form-control" id="myList" onchange="funSelectView(this.value)">
                    <option value="none" id="df">Please Select</option>
                    <option value="three" id="thw">3 Week</option>
                    <option value="six" id="sw">6 week</option>
                    <option value="twelve" id="tww">12 Week</option>
                </select>

Javascript
function funSelectView() {
        document.getElementById("myList").onchange = function () {
            var sheet = document.getElementById("myList").value;
            if (sheet === "three") {
                alert(value);
                funThreeWeekView();
            }
            if (sheet === "six") {
                alert(value);
                funSixWeekView();
            }
            if (sheet === "twelve") {
                alert(value);
                funTwelveWeekView();
            }
            if (sheet === "none") {
                hideAll();
            }
        }
    }

Answer 1

在这种情况下，我通常更喜欢以下两种方法。 你也用过，但你把它们混在一起了。 我在下面展示。 第一的：

Html

<center>View:</center>
<select class="form-control" id="myList" onchange="funSelectView(this.value)">
    <option value="none" id="df">Please Select</option>
    <option value="three" id="thw">3 Week</option>
    <option value="six" id="sw">6 week</option>
    <option value="twelve" id="tww">12 Week</option>
</select>

Javascript

function funSelectView(value){
    if (value === "three") {
        alert(value);
        // funThreeWeekView(); // I don't know about it method
    }
    if (value === "six") {
        alert(value);
        // funSixWeekView();
    }
    if (value === "twelve") {
        alert(value);
        // funTwelveWeekView();
    }
    if (value === "none") {
        hideAll();
    }
}

第二：

Html

<center>View:</center>
<select class="form-control" id="myList">
    <option value="none" id="df">Please Select</option>
    <option value="three" id="thw">3 Week</option>
    <option value="six" id="sw">6 week</option>
    <option value="twelve" id="tww">12 Week</option>
</select>

Javascript：

document.getElementById("myList").onchange = function () {
    var sheet = document.getElementById("myList").value;
    if (sheet === "three") {
        alert(sheet);
        funThreeWeekView();
    }
    if (sheet === "six") {
        alert(sheet);
        funSixWeekView();
    }
    if (sheet === "twelve") {
        alert(sheet);
        funTwelveWeekView();
    }
    if (sheet === "none") {
        hideAll();
    }
}