This question was submitted on February 4th, 2008:
Hi,
I have a combo box called "A" which contains fruits and vegetables
and a list box called Types(i.e) which will display the corresponding types(Eg if we select Fruits then it will display apple, mango and if we select vegetable then it will display carrot, onion etc.
Based upon the selection in the list box and on clicking submit button it will populate the table which will containe prices.
On First loading the page both the combo box and list box will contain "select" as first option. Then we choose Fruits and their corresponding types listed in the List box and based on the selection in the list box and after clicking submit button the table gets populated. All the values are updated in the database.
On Reloading the page we should get the same value which we have selected in Combo Box "A" and list box "Types" and table also should be populated. I am getting the List box value from the database and i am iterating with the list of values in List box.
Eg If i selected Mango and then clicked submit button and same is updated in database.So while i am reloading the
page i am comparing mango with apple, pineapple, mango,custard apple etc. If a match is found i am highlighting that value and the corresponding table should be displayed
The problem here is combo box value and list box value is first displayed and then it takes few seconds to display the Table which looks very awkward for the end user.
Below is the coding which i have done....
JavaScript:
-
for(optionId=0, key=1, value=0; optionId <maxEntityCount; optionId++){
-
document.form1.listbox.options[optionId] = new Option(fruitsArray[key],fruitsArray[value]);
-
if(typesoffruits == fruitsArray[key])[html]
-
{
-
document.form1.listbox.options[optionId].selected = true;
-
isSelected = true
-
}
-
value=value+2;
-
key=key+2;
-
}
-
-
if(isSelected == true){
-
loadtable();
-
}
I want to know whether there is any way in java script such that without iterating the loop i should able to highlight the value which i got from database and the corresponding table should be loaded. That is without iterating typesoffruits with fruitsArray i must able to highlight the typesoffruits and its table should be displayed.
Thanks for patiently reading such a long mail..
Thanks for your efforts and response.[/html]
What it sounds like you're looking for here is actually pretty simple to accomplish. You're keying on the key here, and if you've got the relationship set up the same way in the select element, you can very easily set them to be selected with the following code:
JavaScript:
-
/*
-
if "mango" is selected, and has an id of 1, we assume
-
that the option in the list box is going to look like this:
-
<option value="1">Mango</option>
-
*/
-
var elm = document.forms['form1']['listbox'];
-
elm.options[1].select = true;
Keep in mind, however, that in order for this to work, you must have the elements in the select element ordered by the key, and not alphabetically.
So you'd need to have:
Without more information, that's the best answer I can provide. If you'd like to submit the code for review and adjustment, please feel free.
Comments always welcome!
Anthony
Followup 2/5/2008:
Thanks Anthony for you very valuable suggestion and help. That code is working fine. I am having one more query ...
How can i get the multiple selected values from lIst box using Java script.
Example: Consider i have mango, apple, grapes,strawberry in a listbox.
I am selecting apple and grapes and on click of submit button I am calling a javascript method called getFruits(). In that method, how can i get the selected values i.e(apple and grapes).
Thanks and Regards
This is fairly simple as well. Hat tip goes to DigitialAmit.com, where I picked up this nifty little snippet that does precisely what you need.
JavaScript:
-
var arSelected = [];
-
-
function getMultiple(ob) {
-
while (ob.selectedIndex != -1) {
-
if (ob.selectedIndex != 0) {
-
arSelected.push(ob.options[ob.selectedIndex].value);
-
}
-
ob.options[ob.selectedIndex].selected = false;
-
} // You can use the arSelected array for further processing.
-
}
Which will get all of the selected items and then deselect them. If you wanted to re-select them after you did the collection, you could simply loop through your arSelected array and set them to selected again.
All the best,
Anthony
price oem soft Wordpress Wordpress CMS