Question

这是我的代码：

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" type="text/css" href="style.css">
<script src="jquery-2.2.1.min.js"></script>
<script src="slike.js"></script>
<title>Uvod v jQuery</title>
</head>
<body>

<select id="izberi" onchange="yes()">
  <option value="1">Slika 1</option>
  <option value="2">Slika 2</option>
  <option value="3">Slika 3</option>
  <option value="4">Slika 4</option>
</select>

<script>
//without function
var tmp = document.getElementById("izberi");
var izbira = tmp.options[tmp.selectedIndex].value;

if(izbira == 1) {
    ...
} else if(izbira == 2) {
    ...
}

//with function
function yes(){
    var tmp = document.getElementById("izberi");
    var izbira = tmp.options[tmp.selectedIndex].value;
    if(izbira == 1) {
        ...
    } else if(izbira == 2) {
        ...
    }
}
</script>

</body>
</html>

在我的IF语句中，我创建了HTML表，其中的行和列基于select中选择的内容。现在，如果我不使用函数（在select中没有onchange），那么当我进入网站时我的代码就会起作用（select的默认值是1）。

但是，当我为示例2选择另一个值时，没有任何事情发生，因为我的代码只执行一次（当我进入网站时）。现在我尝试用onchange修复它并调用一个函数（我在函数中有完全相同的代码）但是如果我这样做并且我选择了另一个值我的页面全部变成白色并且看起来我的函数一直在执行没有停止（与网页加载时相同）

那我在哪里弄错了？

修改
我正在使用document.write（）;创建HTML表格时，当我进入页面时，看起来它在我选择不同的值然后调用函数后它不起作用，这是我认为的问题。

Answer 1

我不确定您的代码有什么问题，但以下代码完全符合您的要求，并且稍微优雅一些。

要试用，请运行代码段或转到this Fiddle。

var izberi = document.getElementById("izberi");
var izbira = document.getElementById("izbira");

var yes = function(){
    var selected = izberi.options[izberi.selectedIndex].value;
    switch(selected) {
        case "1":
            // WHATEVER YOU WANT TO HAPPEN IF IZBERI HAS VALUE "1"
            izbira.value = selected;
            break;
        case "2":
            // WHATEVER YOU WANT TO HAPPEN IF IZBERI HAS VALUE "2"
            izbira.value = selected; 
            break;
        case "3":
            // WHATEVER YOU WANT TO HAPPEN IF IZBERI HAS VALUE "3"
            izbira.value = selected;
            break;
        case "4":
            // WHATEVER YOU WANT TO HAPPEN IF IZBERI HAS VALUE "4"
            izbira.value = selected; 
            break;
        default:
            // WHATEVER YOU WANT TO HAPPEN IF IZBERI HAS ANOTHER VALUE
    }
}

yes();
izberi.addEventListener('change', yes);

<select id="izberi">
  <option value="1">Slika 1</option>
  <option value="2">Slika 2</option>
  <option value="3">Slika 3</option>
  <option value="4">Slika 4</option>
</select>
<input id="izbira">

javascript中的onchange无法正常工作

1 个答案: