list box in java script [Archive]

Click to See Complete Forum and Search --> : list box in java script

karthikeyam

January 30th, 2006, 05:19 AM

i added items into listbox using java script like this

function add1()
{
if(form1.text1.value=="")
alert("Name should not be Blank");
else
form1.select1.options[form1.select1.length] = new Option(form1.text1.value);
}

now i want to modify the newly enterd items
but as this is not database i cannot
how to do that
i can delete\modify existing items but cannot which r added dynamically
first i added into listbox like this

<SELECT id="select1" style="Z-INDEX: 101; LEFT: 104px; WIDTH: 160px; POSITION: absolute; TOP: 152px; HEIGHT: 192px"
size="12" name="select1">
<OPTION id="Hyderabad" value="Hyderabad">Hyderabad</OPTION>
<option id="Bangalore" value="Bangalore">Bangalore</option>
<option id="Delhi" value="Delhi">Delhi</option>
<option id="Madras" value="Madras">Madras</option>
<option id="Bombay" value="Bombay">Bombay</option>
<option id="Calcutta" value="Calcutta">Calcutta</option>
<option id="patna" value="patna">patna</option>
</SELECT>

i can change this but not which r entered next
why?
please tell the code

olivthill

January 30th, 2006, 11:34 AM

Sorry, I don't understand very well the question.

Anyway, here is a little example that might be useful to you.
<html>
<script language="JavaScript">
function move_lstbox_item(l1, l2) {
if (l1.options.selectedIndex>=0) {
o=new Option(l1.options[l1.options.selectedIndex].text,l1.options[l1.options.selectedIndex].value);
l2.options[l2.options.length] = o;
l1.options[l1.options.selectedIndex] = null;
}
}

function enum_lstbox_items(l1, list_options) {
list_options.value = "";
for (var i = 0; i < l1.options.length; i++) {
list_options.value = list_options.value + l1.options[i].value + ";";
}
return true;
}

</script>
<head>
</head>
<body>
Transfer an item from one list to the other with a double click
<form name=myform>
<select name="lstbox1" size=5 ondblclick="move_lstbox_item(myform.lstbox1, myform.lstbox2)" style=width:200px>
<option value="a" selected>Apricot
<option value="b">Banana
<option value="c">Cherry
<option value="d">Doughnut
<option value="e">Egg
<option value="f">Fish
</select>
<select name="lstbox2" size=5 ondblclick="move_lstbox_item(myform.lstbox2, myform.lstbox1)" style=width:200px>
</select>
<input type=hidden name=list_items value=";">
<p>
<input type=button name=B_ok value="List items in 2nd listbox" onClick="enum_lstbox_items(myform.lstbox2, list_items);alert(list_items.value)">
</form>
</body>
The first function, called move_lstbox_item(), shows how you can add an item to a listbox (I think you know that already), and delete an item from a listbox.
The secund function, called enum_lstbox_items(), shows how you can list every item in a listbox.

PeejAvery

January 30th, 2006, 01:52 PM

Olivthill, he/she wants to dynamically edit an option instead of deleting would be my suggestion.

What you need to do is use a for loop to check the match the id and then edit that option's value. I will get you an example later when I have time.

PeejAvery

January 30th, 2006, 02:47 PM

Okay, here is what you can do. The following code will change the value of the option but you cannot change the caption. You will have to delete and recreate to do so.

<html>
<body>

<script language="JavaScript">
function editopt(){
newopt = form1.newopt.value;
document.getElementById(form1.oldopt.value).value = newopt;
}
</script>

<form name="form1">
<select name="select1" onchange="alert(form1.select1.value)">
<option id="opt1" value="Option 1">Option 1</option>
<option id="opt2" value="Option 2">Option 2</option>
<option id="opt3" value="Option 3">Option 3</option>
<option id="opt4" value="Option 4">Option 4</option>
</select>
Option ID to change: <input type="text" id="oldopt"><br>
Change option to: <input type="text" id="newopt"><br>
<input type="button" value="Change" onclick="editopt()"><br>
</form>

</body>
</html>