我有一个下拉列表,其中包含值“ 3周视图”,“六周视图”,“十二周视图”。然后,此下拉列表用于基于所选值触发javascript函数。我遇到的问题是,无论选择什么下拉项,它都只会传递“三”的值。这可能是显而易见的,我之前从未做过。
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();
}
}
}
在这种情况下,我通常首选以下两种方法。您也曾经使用过,但是您混合了他们。我在下面显示。第一:
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();
}
}