Dom--Option and select Objects

 

<html>
<head>
<script type="text/javascript">
function disable()
{
document.getElementById("mySelect").disabled=true
}
function enable()
{
document.getElementById("mySelect").disabled=false
}

function getLength()
{
alert(document.getElementById("mySelect").length)
}


function changeSize()
{
document.getElementById("mySelect").size=3
}



function getOption()
{
var x=document.getElementById("mySelect")
alert(x.options[x.selectedIndex].text)
}



function getOptionIndex()
{
var x=document.getElementById("mySelect")
alert(x.selectedIndex)
}




function changeText()
{
var x=document.getElementById("mySelect")
x.options[x.selectedIndex].text="Melon"
}



function removeOption()
{
var x=document.getElementById("mySelect")
x.remove(x.selectedIndex)
}


</script>
</head>

<body>
<form>
<select id="mySelect">
 <option>Apple</option>
 <option>Pear</option>
 <option>Banana</option>
 <option>Orange</option>
</select>
<input type="button" onclick="disable()" value="Disable list">
<input type="button" onclick="enable()" value="Enable list">

<br>
------------------------------------------------------------------
<br>
<input type="button" onclick="getLength()" value="How many options in the list?">


<br>
------------------------------------------------------------------
<br>

<input type="button" onclick="changeSize()" value="Change size of list">

<br>
------------------------------------------------------------------
<br>

<input type="button" onclick="getOption()" value="Alert selected fruit">


<br>
------------------------------------------------------------------
<br>

<input type="button" onclick="getOptionIndex()" value="Alert index of selected fruit">

<br>
------------------------------------------------------------------
<br>

<input type="button" onclick="changeText()" value="Change text of selected fruit">


<br>
------------------------------------------------------------------
<br>

<input type="button" onclick="removeOption()" value="Remove option">


</form>
</body>

</html>

posted @ 2006-07-14 18:26  烈马狂生  阅读(347)  评论(0)  编辑  收藏  举报