Profound Logic Forums

Trying to find the index selected in a combo box.

In a select box, I have the following code under "on change" event:

var x = document.getElementById("ID_DSTYPEB").selectedIndex;

alert (x);

var y = document.getElementById("ID_DSTYPEB").options;
alert("Index: " + y[x].index + " is " + y[x].text);

The first alert gives me the index, starting with 0 for the first value. The second alert gives me the actual text value.

I would like to something similar with a combo box but I can't seem to get it to work.
I am trying to set the index of the select box based on the index value selected in the combo box.
I am also trying to set the index of the select box based on the value entered in the combo box assuming the the value entered is one of the values that can be selected in the combo box.

Do you have any ideas?

Unlike a select box, a combo box does not require the user to select something in it's drop-down list. You can type any value in a combo box, whether it's in the list or not. As such, finding the 'index' isn't supported.

To get the value of a combo box (or any other widget fro that matter) please use the pui.get() API. This returns the string that represents the current value of the combo box. To set the value, you can use pui.set().
The same technique will work with select boxes (pui.get() will return the string value of the currently selected option, pui.set() will change the selected value to the one that matches the string that you provide.)

Might be better for me to describe exactly what it is that I am attempting to do here.

Lets say that I have an abbreviated state table as follows:

AZ Arizona
CA California
CO Colorado
CT Connecticut

I would like to have a combo box that contains all of the state codes above and a resulting drop down that contains the state names.

COMBO BOX DROP DOWN
AZ Arizona
CA California
CO Colorado
CT Connecticut

The user will be able to select or key in a two character state code or the user would be able to select the state name from the drop down.
I want the client via javascript to update the state name if a state code is entered or selected.
I want the client via javascript to update the state code if the state name is selected from the drop down.
To me, this allows for the best of two worlds, fast heads down data entry or the use of combo box and/or drop downs.

I have come up with a solution that works except for one item that I will bring up at the end of my post.
For the combo box I have an ID of ID_DSTYPE
For the drop down I have an ID of ID_DSTYPEB

Note: The combo box value is stored in a file and the combo box value is populated from the file the first time the screen is displayed.
When the screen containing the combo box and drop down is loaded, I have the following JS for the onload event:

//Table Result Settings
document.getElementById("ID_DSTYPEB").selectedIndex = -1; // Set to null

var y = document.getElementById("ID_DSTYPEB").options;
var keyValue = getElementValue("ID_DSTYPE")

for (var i = 0; i < ID_DSTYPEB.options.length; i++) {
if(y.value == keyValue){
document.getElementById("ID_DSTYPEB").selectedIndex = i;
}


For the combo box onchange event, I have the following JS:

//Table Result Settings
document.getElementById("ID_DSTYPEB").selectedIndex = -1; // Set to null

var y = document.getElementById("ID_DSTYPEB").options;
var keyValue = getElementValue("ID_DSTYPE");
var keyValueUpper = keyValue.toUpperCase();

for (var i = 0; i < ID_DSTYPEB.options.length; i++) {
if(y.value == keyValueUpper){
document.getElementById("ID_DSTYPEB").selectedIndex = i;
}
}
}

For the combo box onkeydown event, I have the following JS:

//On Key down - Set Table lookup result to a blank value.
document.getElementById("ID_DSTYPEB").selectedIndex = -1;

For the combo box onselect event, I have the following JS:

//Table Result Settings
document.getElementById("ID_DSTYPEB").selectedIndex = -1; // Set to null

var y = document.getElementById("ID_DSTYPEB").options;
var keyValue = getElementValue("ID_DSTYPE")

//Table Result Settings
document.getElementById("ID_DSTYPEB").selectedIndex = -1; // Set to null

var y = document.getElementById("ID_DSTYPEB").options;
var keyValue = getElementValue("ID_DSTYPE")

for (var i = 0; i < ID_DSTYPEB.options.length; i++) {
if(y.value == keyValue){
document.getElementById("ID_DSTYPEB").selectedIndex = i;
}
}

For the drop down onchange event, I have the following JS:

changeElementValue('ID_DSTYPE', this.value);


All of the above works fine. The drop down does have to be loaded from the program as it appears a load from the database does not occur until after the screen onload event fires.

My only issue is this: Let say the current combo box value is CA. If I type over CA, California is no longer shown in the drop down and if I reenter CA the drop down does not get updated. I need to somehow force a change flag to be set for the combo box anytime I press a key in that field. Can this property be changed for the combo box?

Do you have any suggestions for improvemet?

Once I finalize the code, I will create JS functions for reuse as I have many other tables that are structured the same way.

Thanx, Bruce

We had the same issue where we wanted a dropdown that allowed users to type in what they desired. we never got it to work exactly how we wanted so what we did is simply downloaded a jQuery widget and used that instead. YHere is what we did:

Set a normal textbox and assign a special class
In JQuery.ready() we go get every element with that class and use a user defined data to fill the choices. You can also use a web service to populate your dropdown wich works a whole lot better.
we execute the downloaded combobox through JS. (In our case we used Jquery UI Combo Box)
You must after use pui.set to assign the selected value to the underlying textbox whenever the value changes.
We also binded the onFocus and onClick jquery events to make the dropdown appear but that is all handled on the JS side to make things look better.
If your interested in this solution simply ask i can give you some code examples