Best way to attach objects to Select List?

[wdob]

Hello. What would it be the best approach to attach objects to a Select List? The problem as I understand it is that a Select List has only two arrays, one with text/label and one with value. If you have more values how do you attach them to the list? How about objects? Please consider the fact that the index may change as the entries may move up and down the list or get removed. One of the issues seems to be that the index length remains the same. Thank you for your suggestions.

 

[vacunita]

Not sure I understand what you are asking.

A select list has one array, an options array which contain the index, value, and text label inside it for each option of the dropdown.

<select ...>
<option value="001">First Value</option>
<option value="002">Second Value</option>
<option value="003">Third Value</option>
</select>

So if I wanted to access the options and get their properties I could do this:

function getOption(){
var DDObj=document.getElementById('mydrop');

var opt=2;
var optIndex=DDObj.options[opt].index;
var optVal=DDObj.options[opt].value;
var optText=DDObj.options[opt].text;

;

Obviously the index is equal to the option I'm trying to get.

Now If I wanted to give my select additional properties for whatever reason, I can assign custom properties and access them via the getAttribute() function.

So If I wanted my options to have say an additional code property:

<select ...>
<option value="001" customCode="ABC">First Value</option>
<option value="002" customCode="DEF">Second Value</option>
<option value="003" customCode="GHI">Third Value</option>
</select>

And if I needed to get my custom property:

function getOption(){
var DDObj=document.getElementById('mydrop');

var opt=2;

var optCustomPropery=DDObj.options[opt].getAttribute('customCode');

...

Note however that this custom properties, just like the text value will not get submitted with the form. so you will need to handle them yourself through pre-submission JS if you need to have them be sent to the server for processing.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[wdob]

Thank you for your reply. I should probably said "custom objects". Let's say you have a custom object "myTabMenu" and it contain some properties like "tabTitle", "tabLink", "tabTarget", "tabBackground", "tabAnythingElse" (maybe some methods as well). Let's say all values come from a form "myForm" that acts like a user interface and I want to be able in this user interface to manipulate the tabs by means of a Select list. How would I do that the best way?

 

[vacunita]

Still not quite understanding what you want the dropdown to do with your myTabMenu obj. Dropdowns offer a list of choices how does that interact with your myTabMenu?
Is the dropdown supposed to show the properties of the object so the user can select one, and say edit the property?

For instance if the dropdown shows the myTabMenu properties, and the user selects say tabTitle from the dropdown what happens next? You want a textbox so the user can type in a title for the tabTitle property?

That would have nothing to do with the dropdown, but how you code the actions when an item from it is selected.







----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[wdob]

Thank you again, Phil, for taking time to solve my problem. Much appreciated.

It is not a dropdown, but a select list. I say that because it comes with more functionality. It is a like a component, as it is the following:

http://viralpatel.net/blogs/2009/06/listbox-select-all-move-left-right-up-down-javascript.html

I use this select list or control that allows me to move the entries up and down, delete and add to the list. Now my problem is that there is this limitation and I can only add text and value. Somehow I have to relate or connect this control with a full blown object. The object is in my example a collection of properties (link, target, background...etc).


If you follow the link for a quick view, I think you will have a better understanding of my problem (the picture that worth a thousands words). The list there contains countries. Let's say with each country I want to have more values, like the capital, the population, the language, the flag...etc. where the select list alone can offer me only one value to play with. Somehow, it should be a way for all these other values that I want to be associated with the values from the list or the text or the index. I found difficult to see it how. I want the same functionality that comes with the list to extend to the other properties, for example when I delete the country from the list, the capital, flag and all the others should be gone too. When I delete it from the list, the index will change for the remaining of the entries from the list. If the connection with the other "values" is based on the index number, than it should be reflected. The same thing when you add a new entry in the list, should also be entered the values of countries' capital, flag, language...etc.

So at the select list as it appears in the example given, imagine that I add new form fields for the other "values": capital, language, flag, population. All these should be put together somehow and I have difficulties understanding how.

Thank you.

 

[vacunita]

I see some js functions that add some functionality but the base is still a run of the mill dropdown. List boxes are nothing more than dropdowns with a size attribute set.

Source code from your link:

<SELECT id="a" [red]size="10"[/red] multiple>

	<OPTION value="a">Afghanistan</OPTION>

	<OPTION value="b">Bahamas</OPTION>

	<OPTION value="c">Barbados</OPTION>

	<OPTION value="d">Belgium</OPTION>

	<OPTION value="e">Bhutan</OPTION>

	<OPTION value="f">China</OPTION>

	<OPTION value="g">Croatia</OPTION>

	<OPTION value="h">Denmark</OPTION>

	<OPTION value="i">France</OPTION>

</SELECT>

With that in mind, you can add the attributes like I showed above, and get them with the getAttribute function.

You just need to alter the functions that move the items up and down and across to also include your custom properties.

Or use some slightly more modern alternatives that will move the entire option in one go, without having to go through the attributes independently.

You can if you wanted to add a json object as one of the properties and refer to that. It will move with the options in listbox.


As an example, here's a list box in which you can move the items up and down in it, and it includes a json object that you can address

<script type="text/javascript">
function getOption(DDObj,DDOpt){

var opt=DDOpt.value;
var optIndex=DDObj.options[opt].index;
var optVal=DDObj.options[opt].value;
var optText=DDObj.options[opt].text;
var optcustProp=DDObj.options[opt].getAttribute('customVal1');
var optcustProp2=DDObj.options[opt].getAttribute('customVal2');
alert("Index:[ " +  optIndex + "] Value:[" + optVal + "] Text:[" + optText + "] CustProp=[" + optcustProp + "] CustObj=" + optcustProp2 + "]"); 
var myObj=eval(optcustProp2);
alert(myObject.population);
}
function move_List(direction,listObj){
	  var selOpt=listObj.selectedIndex;
	  if(direction=='up'){ var move=1; var pos=-1}
	  else{var move=-1; var pos=2}
	  var MoveElement=listObj.options[selOpt];
	  	       listObj.options.add(MoveElement,selOpt+pos);
	  
	  
	  }
</script>

<SELECT id="s" size="10" multiple>

	<OPTION value="a" customval1="AFG" customval2="var myObject={'name':'somename', 'flag':'someflag', 'population':'1000000'};">Afghanistan</OPTION>

	<OPTION value="b" customval1="BAH" customval2="var myObject={'name':'somename', 'flag':'someflag', 'population':'2000000'};">Bahamas</OPTION>

	<OPTION value="c" customval1="BAR" customval2="var myObject={'name':'somename', 'flag':'someflag', 'population':'3000000'};">Barbados</OPTION>

	<OPTION value="d" customval1="BEL" customval2="var myObject={'name':'somename', 'flag':'someflag', 'population':'4000000'};">Belgium</OPTION>

	<OPTION value="e" customval1="BHU" customval2="var myObject={'name':'somename', 'flag':'someflag', 'population':'5000000'};">Bhutan</OPTION>

	<OPTION value="f" customval1="Chi" customval2="var myObject={'name':'somename', 'flag':'someflag', 'population':'6000000'};">China</OPTION>

	<OPTION value="g" customval1="Cro" customval2="var myObject={'name':'somename', 'flag':'someflag', 'population':'7000000'};">Croatia</OPTION>

	<OPTION value="h" customval1="Den" customval2="var myObject={'name':'somename', 'flag':'someflag', 'population':'8000000'};">Denmark</OPTION>

	<OPTION value="i" customval1="Fra" customval2="var myObject={'name':'somename', 'flag':'someflag', 'population':'9000000'};">France</OPTION>

</SELECT>
<input type=button value="Up" onClick="move_List('up',document.getElementById('s')); return false"> <input type=button value="down" onClick="move_List('down',document.getElementById('s')); return false">

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[wdob]

I guess it should have been mySelectList.selectedIndex, nevertheless I guess it is clear what I meant. It is not .index, but selectedIndex. Looking forward to hearing from you, Phil. Thank you very much.

 

[vacunita]

Lists or drop downs have no such interface to take values from a form. You can stick all the information you want in them and retrieve them, but it will all be done in your js script. Using the setAttribute to add whatever other information you need to it. Be it an object, or a comma separated string its up to you.

As I mentioned above, all those values will not get passed with a form to the server for processing if the form is submitted so they will have to be handled differently.

ddObj.options[ddObj.selectedIndex].setAttribute("myObj","itsvalue");

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[wdob]

Thanks again, many things are much clearer and I guess somebody that run in a similar problem will have something to learn from your answers.

 

[vacunita]

I've sent yo several emails per your request with no answer. Last attempt at contact should you want to continue with this.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/