Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Problem using onchange to modify list contents

    I have 2 drop down lists. When I change the selection in the first list, I repopulate the second list. My problem is that the display of the second list does not update when I repopulate it. I've tried repopulating it with 2 methods, 1) building the options for the <select> element using new Option() and by 2) building the string for the <option> elements and setting the innerHTML to this string. Both methods give the same result which is that the underlying data is properly changed but the display does not update to show this. Anybody know what I need to do to get this working?

    The code is as follows:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Test List ....</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
    <script type="text/javascript">
    function BuildClientList()
    {
    	var uiEl = document.getElementById('uidCl');
    	var aUidClient = new Array(3);
    
    	aUidClient[0] = ['101', 'Client 1'];
    	aUidClient[1] = ['102', 'Client 2'];
    	aUidClient[2] = ['102', 'Client 3'];
    	
    	uiEl.options.length = 0;
    	var cClient = aUidClient.length;
    	for (iRow = 0; iRow < cClient; iRow++)
    	{
    		uiEl.options[iRow] = new Option(aUidClient[iRow][1], aUidClient[iRow][0]);
    	}
    }
    
    function BuildProjectList()
    {
    	iClient = document.getElementById('uidCl').selectedIndex;
    	var uiEl = document.getElementById('uidPr');
    	var aUidProject = new Array(3);
    	switch (iClient)
    	{
    		case 0:
    		aUidProject[0] = ['101', '1Project 1'];
    		aUidProject[1] = ['102', '1Project 2'];
    		aUidProject[2] = ['103', '1Project 3'];
    		break;
    		case 1:
    		aUidProject[0] = ['201', '2Project 1'];
    		aUidProject[1] = ['202', '2Project 2'];
    		aUidProject[2] = ['203', '2Project 3'];
    		break;
    		default:
    		aUidProject[0] = ['301', '3Project 1'];
    		aUidProject[1] = ['302', '3Project 2'];
    		aUidProject[2] = ['303', '3Project 3'];
    	}
    	
    
    	uiEl.options.length = 0;
    	var cProject = aUidProject.length;
    	var strInner = "";
    	for (iRow = 0; iRow < cProject; iRow++)
    	{
    		uiEl.options[iRow] = new Option(aUidProject[iRow][1], aUidProject[iRow][0]);
    		strInner += "<option value=\"" + aUidProject[iRow][0] + "\">" + 
    			aUidProject[iRow][1] + "</option>";
    	}
    //	uiEl.innerHTML = strInner;
    }
    
    </script>
    </head>
    <body>
    <div data-role="fieldcontain">
    <input type="hidden" id="id_user_info" name="id_user_info" value="1" />
       <label for="s_client" class="select ui-hidden-accessible">Client...</label>
       <select data-overlay-theme="a" data-native-menu="false" name="uidCl" id="uidCl" onChange="BuildProjectList()">
    <script type="text/javascript">
    BuildClientList();
    </script>
    </select>
    
    
    </div><div data-role="fieldcontain">
    <input type="hidden" id="id_proj" name="id_proj" value="2" />
       <label for="s_proj" class="select ui-hidden-accessible">Project...</label>
       <select data-overlay-theme="a" data-native-menu="false" name="uidPr" id="uidPr" >
    <script type="text/javascript">
    BuildProjectList();
    </script>
    </select>
    </div>
    </body>
    </html>

  • #2
    New Coder
    Join Date
    Jan 2012
    Posts
    12
    Thanks
    0
    Thanked 4 Times in 4 Posts
    hii jbww

    This is an interesting problem to resolve. The problem is the some browsers (including IE) do not allow to set and innerHTML for the <select> tag.

    The best solution is to redraw the entire <select> tag. It works!

    Wrap the <select> in a <td> or <div> with an id.

    e.g.

    <div id="my_select_tag">
    <select onchange="some_function()">
    <option>
    ...
    </select>
    </div>

    As per my opinion, the innerHTML which you're trying to set looks like a collection of <option> tags, like - "<option>...</option><option>...</option>".

    Instead of this, it should be like - "<select onchange=\"some_function()\"<option>...</option><option>...</option></select>"

    ...and this should be set as the innerHTML of the wrapper <td> or <div>, as:
    Code:
    my_div=document.getElementById("my_select_tag");
    my_div.innerHTML=the_new_select_tag;
    Hope this helps!

    Cheers

  • Users who have thanked theghostofc for this post:

    jbww (02-13-2012)

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I found a way to do this in jquery.

    Code:
    // set the index for a <select> element
    function SetIndex(eid, i)
    {
    	var strEid = "#" + eid;
    	var menuSelect = $(strEid);
    	menuSelect[0].selectedIndex = i;
    	menuSelect.selectmenu("refresh");
    }


  •  

    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
    •