Web-Frontend
HTML-Tutorial
Xiaoqiangs mobile HTML5-Entwicklungsstraße (31) – JavaScript-Rezension 6
Xiaoqiangs mobile HTML5-Entwicklungsstraße (31) – JavaScript-Rezension 6
HTML-DOM-Modell: Bevor das w3c-DOM-Modell (Spezifikation) erschien, unterstützte jeder Browser einige DOM-Operationen
Objekt auswählen
Attribute: selectedIndex: Gibt den Index der aktuell vom Benutzer ausgewählten Option an (von 0 Start ) Länge: Ruft die Länge der Option ab oder legt sie fest. Optionen: Der Wert ist ein Array, jedes Array-Element ist ein Optionsobjekt, das alle Optionen der Dropdown-Liste darstellt. Optionsobjekt
Attribute: Text: Beschreibung der Option Wert: Der Wert der ausgewählten Option: Wenn der Wert wahr ist, bedeutet dies, dass diese Option vom Benutzer ausgewählt wurde und das Option-Objekt wie folgt erstellt werden kann:
var obj = new Option(text, value );
<html>
<head>
<script src="myjs.js"></script>
<script>
function f1(){
//alert($('s1').selectedIndex);
//alert($('s1').length);
var arr = $('s1').options;
for(i=0;i<arr.length;i++){
alert(arr[i].text +' '+ arr[i].value);
}
}
function f2(){
var op = new Option('武汉','wh');
$('s1').options[$('s1').options.length] = op;
}
</script>
</head>
<body>
<select id="s1" style="width:120px;" name="s1">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="xa">西安</option>
<option value="sz">深圳</option>
<option value="tj">天津</option>
</select>
<input type="button" value="点我吧" onclick="f2();"/>
</body>
</html>Kaskadierende Dropdown-Liste
<html>
<head>
<script src="myjs.js"></script>
<script>
var arr = new Array();
arr[0] = [new Option('--方向--','-1')];
arr[1] = [new Option('商务英语','en1'),
new Option('专业英语','en2')];
arr[2] = [new Option('计算机软件','comp1'),
new Option('计算机网络','comp2'),
new Option('计算机应用','comp3')];
//数组的创建放在外面执行效率更高
function change(index){
$('s2').length = 0;
for(i=0;i<arr[index].length;i++){
$('s2').options[i] = arr[index][i];
}
}
</script>
</head>
<body>
<select id="s1" style="width:120px;" onchange="change(this.selectedIndex);">
<!-- this表示绑定该事件的节点,在这里表示<select>节点-->
<option value="-1">--专业--</option>
<option value="english">英语</option>
<option value="computer">计算机</option>
</select>
<select id="s2" style="width:120px;">
<option value="-1">--方向--</option>
</select>
</body>
</html>Tabellenobjekt entspricht
