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

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:

[CODE]//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);
}[/CODE]

The Html that works for previewing:

[CODE]<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> [/CODE]

Link to full example that works for previewing avatars only.
[URL=”http://fuzzbert.org/avatar_change.html”]http://fuzzbert.org/avatar_change.html[/URL]

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: [URL=”http://fuzzbert.org/avatar_need2change.html”]http://fuzzbert.org/avatar_need2change.html[/URL]

[CODE]<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> [/CODE]

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

[CODE]<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>[/CODE]

see example: [URL=”http://fuzzbert.org/avatar_change.html”]http://fuzzbert.org/avatar_change.html[/URL]

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

I tried to see if [B]itemId[/B] 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 [B]selectIndex[/B] so see what I need to achieve
[B][URL=”http://fuzzbert.org/avatar_change.html”]http://fuzzbert.org/avatar_change.html[/URL][/B]

This is format I need to get the preview working again with alternative selectIndex:
[B][URL=”http://fuzzbert.org/avatar_need2change.html”]http://fuzzbert.org/avatar_need2change.html[/URL][/B]

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.?

Also in #JavaScript _↴