Problem using onchange to modify list contents

jbww · 02-04-2012, 10:55 PM

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>

theghostofc · 02-05-2012, 03:17 PM

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

jbww · 02-13-2012, 06:47 PM

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