Sunday, July 15, 2007

select options manuplation of javascript


<form action="" method="get" accept-charset="utf-8">
<strong>Single Robot Choice:</strong>
<select name="robot" id="robot">
<option value="1">Security</option>
<option value="2">Trainer</option>
<option value="3">Friend</option>
<option value="4">Cook</option>
</select>
<br /><br />
<strong>Multiple Robot Choice:</strong>
<select name="robotMulti" id="robotMulti" size="4" multiple="multiple">
<option value="a">Security</option>
<option value="g">Trainer</option>
<option value="s">Friend</option>
<option value="d">Cook</option>
</select>

<input type='button' value='-' name='button1'>
</form>

<script type="text/javascript" charset="utf-8">
function doc (argument) {
document.write(argument);
document.write("<br />\n");
}

function selectedItems (obj) {
var o = obj.options;
var s = '';
for(var i in o) {
if(o[i].selected){
s += 'index="' + i + '": selected options text="' + o[i].text + '", selected options value="' + o[i].value + '"; ';
}
}
alert(s);
}

var select1 = document.forms[0].robot
var select2 = document.forms[0].robotMulti

// doc(select1);
// alert(select2.multiple);

select1.onchange = function () {
alert('selected text = "' + select1.options[select1.selectedIndex].text + '"; selected index="' + select1.selectedIndex + '"; option index ="' + select1.options[select1.selectedIndex].index + '" ');
}

document.forms[0].button1.onclick = function() {
selectedItems(select2);
}

</script>

No comments :