www.webdeveloper.com
Results 1 to 3 of 3

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

  1. #1
    Join Date
    Dec 2008
    Posts
    11

    Question 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);
    }
    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>
    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

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

  2. #2
    Join Date
    Feb 2008
    Posts
    1,666
    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:
    Code:
    document.forms['formName'].elements['selectName'].selectedIndex = 2;
    or you can set the associated OPTION's selected property to true:
    Code:
    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.

  3. #3
    Join Date
    Dec 2008
    Posts
    11

    Question Thank you!

    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles