PDA

View Full Version : editable <select> box in html using script



rm_72756
01-31-2011, 05:20 PM
I have a dropdown menu. the code is as below:
<html:select name="data1" property="accountNumber" styleClass="formContent" >
<option>Id1 </option>
<option>Id2 </option>

I need to give user an option to select from the list or enter a new value. how do you do this ? I can add another option say "new value" and when he choose this user should be able to add the new value/ please help !! I'm new to java script.

Philip M
01-31-2011, 05:42 PM
Try this:-


<form name = "myform">

<form name = "myform">

<input type = "text" name = "newoption" id = "newoption" value = "Add this to the select list" size = "30" onclick = "if (this.value == 'Add this to the select list') this.value = '';" onblur = "addOption(this.value); this.value = 'Add this to the select list' ">

<select name = "listBox1" id = "listBox1">
<option value = "">First Value If Desired</option>
<option value = "">Second Value If Desired</option>
</select>
</form>

<script type = "text/javascript">

function addOption(txt) {
var s = document.getElementById('listBox1');
var opt = new Option(txt);

for (var i = 0; i<s.options.length; i++) {
var xtext = document.myform.listBox1[i].text;
if (txt == xtext) {
alert ("You have already added this value to the select box")
return false;
}
}

s.options[s.options.length] = opt;
return true;
}

</script>


We make a living by what we get, but we make a life by what we give. - Sir William Churchill (1874-1965)

rm_72756
01-31-2011, 05:52 PM
thanks Philip. Actually I dont need a seperate tex box. I need to edit the existing dropdown itself.

Philip M
01-31-2011, 05:55 PM
thanks Philip. Actually I dont need a seperate tex box. I need to edit the existing dropdown itself.

That is not possible.