Drop Down Menu Need to call <option> values by a string not selectIndex - help

[techie35]

Hi,

I have an avatar picker. We have the backend working but it requires that the value of my <option> in a dropdown list has to be a string.

The purpose of the javascript is to allow the user to preview the avatar before they select it.

My original preview script uses selectedIndex].value; and assigned a number to each <option>

Now my value is a string.
I need to be able to pass a value to a dropdown list that is not a number. The reason is I have to pass a string is for the backend to recoginize the confirm action and update the CMS with the new selection.

(links to examples are below)

Here is my the changeAvatar original code that works for previewing the avatars only:

The Javascript:

//will be called when the avatar drop list changes
function changeAvatar(avatarNum) {
	
	//get the element that was selected
	var selectedAvatarNum = $('avatarChange:chooseAvatar')[$('avatarChange:chooseAvatar').selectedIndex].value;
	
	var tempAvatar = avatars[selectedAvatarNum];
	var imgFolders = 'images/themes';
	//change the porthole image
	$('portholeAvatar').src = imgFolders + "/" + tempAvatar.porthole_img; //<img id="portholeAvatar">...
	//console.debug($('portholeAvatar').src);
	//change the header image
	$('headerContainerImage').setStyle({backgroundImage:'url(' + imgFolders + '/' + tempAvatar.banner_img +')'});
	
	//change the banner
	$('avatarImg').src = imgFolders + "/" + tempAvatar.header_img;
	
	console.debug($('avatarImg').src);
}

The Html that works for previewing:

<select id='avatarChange:chooseAvatar' name="avatarChange:chooseAvatar"  onchange="changeAvatar();">	
<option value="0" >Archon Male</option> 
	<option value="1" >Archon Female</option> 
	<option value="2" >Chronox Male</option> 
	<option value="3" >Chronox Female</option> 
	<option value="4" >Doron Male</option> 
	<option value="5">Doron Female</option> 
	<option value="6">Juror Male</option> 
	<option value="7">Juror Female</option> 
	<option value="8">Karakuri Male</option> 
	<option value="9">Karakuri Female</option> 
</select>

Link to full example that works for previewing avatars only.
http://fuzzbert.org/avatar_change.html

----------------------------------------------
This code works for the CMS but breaks the preview:

This is new html I have to get to work for the preview side:
example of full html and code: http://fuzzbert.org/avatar_need2change.html

<select id='avatarChange:chooseAvatar' name="avatarChange:chooseAvatar"  onchange="changeAvatar();">	
<option value="arch_m1" >Archon Male</option> 
	<option value="arch_f1" >Archon Female</option> 
	<option value="chronox_m1" >Chronox Male</option> 
	<option value="chronox_f1" >Chronox Female</option> 
	<option value="doron_m1" >Doron Male</option> 
	<option value="doron_f1">Doron Female</option> 
	<option value="juror_m1">Juror Male</option> 
	<option value="juror_f1">Juror Female</option> 
	<option value="karakuri_m1">Karakuri Male</option> 
	<option value="karakuri_f1">Karakuri Female</option> 
</select>

This list is actually render by JSF: <f:selectItem>
In plain xhtml I could get it to work by add "id" to the <option> like this

<option value="arch_m_1" >Archon Male</option> 
	<option value="arch_f_1"  id="0">Archon Female</option> 
	<option value="chronox_m_1" id="1">Chronox Male</option>

see example: http://fuzzbert.org/avatar_change.html

But JSF only allows for an id to be assigned at the <select> Level
It won't render if id is added to <option>

I tried to see if itemId would work following JSF convention but is just ignored it. It did not even render it in code of the <option>

Here is link examples so you can see the full JS and html all together.

Preview avatar that works selectIndex so see what I need to achieve
http://fuzzbert.org/avatar_change.html

This is format I need to get the preview working again with alternative selectIndex:
http://fuzzbert.org/avatar_need2change.html

One more note in case it makes a difference:
The option list is built manually. I can't do it dynamically with JSF's.

I more of a front-end person and Js is not my strong suit so any advice, recommendation, pointer, examples, or help is greatly appreciated.

[MrNobody]

Your explanation is too convoluted to straighten out -- but let me say that it makes no difference whether the OPTION value is a string or a number. Meaning, a number is always available for every OPTION whether you specify such a number or not. The selectedIndex is that number. Also meaning, you don't need a number in the OPTION value in order to select an OPTION -- just use the options index for that.

You can either set selectedIndex directly:

document.forms['formName'].elements['selectName'].selectedIndex = 2;

or you can set the associated OPTION's selected property to true:

document.forms['formName'].elements['selectName'].options[2].selected = true;

Of course, you can also use a for loop to search the options for the one you wish to select -- if all you have is the string value to identify the OPTION.

[techie35]

Apologies on being convulent. I guess too much information. Thanks for the tips and direction. I will give them a try and see where they go.