[SOLVED] Change Listbox Selected Value/Index Dynamically

[elabuwa]

Hey Guys,

 

I think this is a real easy , but its givin me a headache.

 

1. This Php code inserts the values to the listbox by readin a mysql table and works fine.

<?php 
			$tbl_name="cards"; // Table name
			$t = "customer";
			$query="SELECT nama FROM $tbl_name WHERE typer = '$t' ORDER BY nama";
			$result=mysql_query($query);
			$num=mysql_num_rows($result);
			If ($num != 0){
				while($row = mysql_fetch_array($result)){
				   $idz = $row['nama'];
				   If ($cusname == $idz){
	 				    echo "<option value='".$idz."' selected>".$idz."</option>";
				   }else{
					   	echo "<option value='".$idz."'>".$idz."</option>";
				   }
				}
			}
		?>

2. This is code calls javascript to add another row in the table where the listbox (coding given above for the values) exits.

echo "<script language=javascript>addRow('dataTable','$each_amount','$acdescr[$k]')</script>";

3. This bit does its magic and adds another row.

function addRow(tableID,abc,descr) {
		var a = abc;
//			var listnama = descr;
		var listnama = 3;		
            var table = document.getElementById(tableID);

            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);

            var colCount = table.rows[0].cells.length;

            for(var i=0; i<colCount; i++) {

                var newcell = row.insertCell(i);

                newcell.innerHTML = table.rows[0].cells[i].innerHTML;
                //alert(newcell.childNodes);
                switch(newcell.childNodes[0].type) {
                    case "text":
                            newcell.childNodes[0].value = a;
                            break;
                    case "checkbox":
                            newcell.childNodes[0].checked = false;
                            break;
                    case "select-one":
                          [b] //newcell.childNodes[0].selectedIndex = listnama;
		//newcell.childNodes[0].selectedIndex = 0;
		document.getElementById("tableID").selectedIndex = 3;[/b]
                            break;
                }
            }

        }

 

What I want is to assign the selected value in the list box to change dynamically.

Ok forget dynamically. Even if i hardcode the listbox selectedindex wont get changed.

It just has the default selected value when the listbox is created.

 

Simply saying none of the above bolded code doesnt work.

 

Can you guys please help out. A sample code would be very nice.

 

Thanks heaps in advance.

 

PS : Im new to Javascript.

 

[xenophobia]

Ermm if you wanna set the selectedIndex, use this:

 

document.getElementById('select-element').options[index].selected = true;

 

This will set the index no (index) in the select list (starting from 0) to be selected.

 

[elabuwa]

hey xeno,

 

i tried the below code with no success.

 

document.getElementById('dataTable').options[2].selected = true;

 

The listbox name is acnumber. do i need to mention it somewhere?

 

document.getElementById('acnumber[]').options[2].selected = true; //failed as well

 

dataTable is the table which has the listbox name "acnumber[]" in each row.

 

Can you please help me out.

 

[xenophobia]

You can't get an element by it's name using getElementById.

 

You have to either:

<select name="acnumber[]" id="acnumber-1">..</select>

<select name="acnumber[]" id="acnumber-2">..</select>

<select name="acnumber[]" id="acnumber-3">..</select>

so that in your JS code:

document.getElementById("acnumber-1").options[index].selected = true;

 

OR

Keep your current HTML select box but in your JS:

var listOfSelect = document.getElementsByTagName("select");

 

var listOfSelect[0]; // select box 1

var listOfSelect[1]; // select box 2

var listOfSelect[2]; // select box 3

 

So if you wanna set the option be selected on [index] in select box number 2:

listOfSelect[1].options[index].selected = true;

 

Cheers. 

[elabuwa]

Hey xeno,

 

Thanks for the quick reply.

Im sorry but im totally lost.

 

I tried the below code.

I used number 4 because the page has 5 List boxes so because i wanna edit the last one i used 4.

 

function setVals() {

var a = document.getElementsByTagName( "SELECT" );

alert (a);

listOfSelect[4].options[2].selected = true;

}

 

The alert returns "[Object HTMLCollection]". I dunno wth this means.

 

Can you please help me.

The 4th and onwards listboxes i wanna change are added dynamically. But Im sure there are atleast 2 list boxes after the 4th.

 

I can set the first one (4th) when combining php and html (you know when you are adding the options in the list box).

 

But the second ones and onwards im getting stuck because of this.

 

I have a good mind to post the entire code for the page. Should I? lol.

 

Any help is highly appreciated.

[elabuwa]

Hey xeno,

 

document.getElementsByTagName("select").item(4).options[3].selected = true;

 

the above code worked.

thanks matey.

I should be able to get a workaround to get the index number dynamically.

thanks very much .

 

thank you thank you thank you.

words cant express how thankful i am.  :D :D :D :D :D :D :D :D :D