JavaScript在线手册

• 属性：

form	该对象所在的表单
name	该对象的name属性
length	选项的数目
options	<option>标记
selectedIndex	所选项目的索引值
type	该对象的type属性

• 方法：

blur()
focus()
handleEvent(事件)

• 事件处理程序：

onBlur onClick onChange onFocus onKeyDown onKeyPress onKeyUp
onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove

• 格式：

<option value="值" selected>文字</option>

new Option([文字[,值[,defaultSelected[,selected]]]])

• 属性：

selected	判断该选项是否被选取
defaultSelected	指定该选项为默认选定状态
index	所有选项所构成的数组索引值
length	选项的数目
text	该选项显示的文字
value	所选项传到服务器的值

• 例1：

<Script>

var url = new Array(3);
url[0] = "http://www.yam.org.tw/";
url[1] = "http://www.kimo.com/";
url[2] = "http://chinese.yahoo.com/";

function goto(form) {
var i = form.menu.selectedIndex;
if (i>0) {
location = url[i-1];
}
}

</Script>
<FORM>
<SELECT NAME="menu" onChange="goto(this.form)">
<OPTION>你喜欢哪一个搜索引擎?
<OPTION STYLE="color:red">◆蕃薯藤
<OPTION STYLE="color:red">◇奇摩
<OPTION STYLE="color:red">◆中文雅虎
</SELECT>
</FORM>

• 例2：

<Script>

function getText() {
sel = document.forms[0].weekday
ans = sel.options[sel.selectedIndex].text
return ans;
}

</Script>
<FORM>请选择...
<SELECT name=weekday>
<OPTION VALUE="Monday">星期一
<OPTION VALUE="Tuesday">星期二
<OPTION VALUE="Wednesday">星期三
<OPTION VALUE="Thursday">星期四
<OPTION VALUE="Friday">星期五
<OPTION VALUE="Saturday">星期六
<OPTION VALUE="Sunday">星期日
</SELECT><P>
<INPUT TYPE="button" VALUE="取出选项的文字"
onClick="alert(getText())">
<INPUT TYPE="button" VALUE="取出选项的值"
onClick="alert(this.form.weekday.value)"><BR>
</FORM>

• 例3：

<FORM NAME="form1">
你最喜欢哪一种水果?
<INPUT TYPE="text" NAME="fruit">
<A HREF="#" onClick="javascript:open('1.htm','','width=100')">
查询</A>
</FORM>

　

<Script> /* -------- 1.htm -------- */

function choice() {
sel = document.forms[0].elements[0];
document.form1.fruit.value =
sel.options[sel.selectedIndex].text;
self.close();
}

</Script>

<FORM>
<SELECT onChange="choice()">
<OPTION>请选择
<OPTION>西瓜
<OPTION>香蕉
</SELECT>
</FORM>

• 例4：

<Script>

function createOptions(){
var option = new Option(document.form1.select1.value)
document.form1.select2.options[2] = option;
}

</script>

<form name="form1">
<select name="select1" size="10">
<option>可选择项目 <option>---------------
<option value="香蕉">香蕉 <option value="葡萄">葡萄
<option value="苹果">苹果 <option value="梨子">梨子
</select>

<input type="button" value="-->" onClick="createOptions()">
<select name="select2" size="10">
<option>选择项目 <option>---------------
</select>
</form>

• 例5：

<Script>

function createOptions(){
sel1 = document.form1.select1;
sel2 = document.form1.select2;
var num = sel1.selectedIndex;
var option = new Option(sel1.options[num].text);
sel2.options[2] = option;
}

</script>

<form name="form1">
<select name="select1" size="10">
<option>可选择项目 <option>---------------
<option value="香蕉">香蕉 <option value="葡萄">葡萄
<option value="苹果">苹果 <option value="梨子">梨子
</select>

<input type="button" value="-->" onClick="createOptions()">
<select name="select2" size="10">
<option>选择项目 <option>---------------
</select>
</form>

• 例6：

<Script>

function createOptions(){
sel1 = document.form1.select1;
sel2 = document.form1.select2;
var num = sel1.selectedIndex;
var option = new Option(sel1.options[num].text);
var item = sel2.options.length;
sel2.options[item] = option;
}

</script>

<form name="form1">

<select name="select1" size="10">
<option>可选择项目 <option>---------------
<option value="香蕉">香蕉 <option value="葡萄">葡萄
<option value="苹果">苹果 <option value="梨子">梨子
</select>

<input type="button" value="-->" onClick="createOptions()">
<select name="select2" size="10">
<option>选择项目 <option>---------------
</select>
</form>

• 例7：

<Script>

function createOptions(){

sel1 = document.form1.select1;
sel2 = document.form1.select2;
var num = sel1.selectedIndex;
if (num > 1) {
var option = new Option(sel1.options[num].text);
var item = sel2.options.length;
sel2.options[item] = option;
}
sel1.selectedIndex = 10000;
}

function delOptions() {
var num = document.form1.select2.selectedIndex;
if (num>1)
document.form1.select2.options[num] = null;
else
document.form1.select2.selectedIndex = 10000;
}

</script>
<form name="form1">
<select name="select1" size="10"
onDblClick="createOptions()">
<option>可选择项目 <option>---------------
<option value="香蕉">香蕉 <option value="葡萄">葡萄
<option value="苹果">苹果 <option value="梨子">梨子
</select>
<input type="button" value="选择" onClick="createOptions()">
<select name="select2" size="10">
<option>选择项目 <option>---------------
</select>
<input type="button" value="删除" onClick="delOptions()">
</form>