help on select box

Discussion in 'JavaScript' started by jj0914, Aug 15, 2007.

0
  1. #1
    Hi guys, I have 3 select boxes which has dependent relationship, the second box will show up depends on selection from first box, the third box will show up depends on second box, So far I can get second box showing up no problem, but not sure how I can get the third box working.

    the second box and third box are created on the fly.

    here is my code:
    
<script type="text/javascript" src="[% c.uri_for("/static/js/effects.js") %]"></script>
<script type="text/javascript" src="[% c.uri_for("/static/js/controls.js") %]"></script>
<script type="text/javascript" src="[% c.uri_for("/static/js/prototype.js") %]"></script>


<script type="text/javascript">

function getSubCat(PID) {
    var category = $(PID);
    var url = 'http://kewei-desktop:3000/admin/subcategories/category/' + category.value;
    var divIdName = "category_"+category.value+"_children";
   
    new Ajax.Request(url, { 
          method: 'post',
          onSuccess: function(transport) {
              var response = transport.responseText;
              var tmp1 = document.createElement("div");
              tmp1.setAttribute("class", "SubCategory");
              tmp1.setAttribute("id", divIdName);
              tmp1.innerHTML = response;
              if ( response.length > 4 ) {              
                  tmp1.innerHTML = response;
                  $("linkInfo").removeChild($("linkInfo").lastChild);    
                  $("linkInfo").appendChild(tmp1);
              }
              else {
                  $("linkInfo").removeChild($("linkInfo").lastChild);
                  $("linkInfo").appendChild(tmp1);
              }
          }
        }
    )
}

</script>
    Code (markup):
    Can anyone give me hints? Thanks in advance
     
    jj0914, Aug 15, 2007 IP
  2. Mike H.

    Mike H. Peon

    Messages:
    219
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #2
    See my AJAX/PHP/MySQL Dynamic Dependent Select List code here:
    http://ajaxforums.net/index.php?topic=858.0

    Three lists, second dependent upon main, third dependent upon second, tested in IE and FF:
    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<script type="text/javascript">
 	
	var categories = [];
	categories["startList"] = ["Apparel","Books"]
	categories["Apparel"] = ["Men","Women"];
	categories["Books"] = ["Biography","Fiction","Nonfiction"];
	categories["Men"] = ["Shirts","Ties","Belts"];
	categories["Women"] = ["Blouses","Skirts","Scarves"];
	categories["Biography"] = ["Contemporay","Historical","Other"];
	categories["Fiction"] = ["Science","Romance"];
	categories["Nonfiction"] = ["How-To","Travel","Cookbooks"];

	var nLists = 3; // number of lists in the set

	function fillSelect(currCat,currList){

		var step = Number(currList.name.replace(/\D/g,""));
		for (i=step; i<nLists+1; i++)
			{
			 document.forms[0]['List'+i].length = 1;
			 document.forms[0]['List'+i].selectedIndex = 0;
			}
		var nCat = categories[currCat];
		for (each in nCat)
			{
			 var nOption = document.createElement('option'); 
			 var nData = document.createTextNode(nCat[each]); 
			 nOption.setAttribute('value',nCat[each]); 
			 nOption.appendChild(nData); 
			 currList.appendChild(nOption); 
			} 
	}

	function getValue(isValue){

		alert(isValue);
	}


	function init(){

		fillSelect('startList',document.forms[0]['List1'])
	}

	onload=init;

</script>
</head>
<body>
	<form action="">
		<select name='List1' onchange="fillSelect(this.value,this.form['List2'])">
			<option selected>Make a selection</option>
		</select>
		&nbsp;
		<select name='List2' onchange="fillSelect(this.value,this.form['List3'])">
			<option selected>Make a selection</option>
		</select>
		&nbsp;
		<select name='List3' onchange="getValue(this.value)">
			<option selected >Make a selection</option>
		</select>
	</form>
</body>
</html>
    Code (markup):
     
    Mike H., Aug 15, 2007 IP
  3. jj0914

    jj0914 Guest

    Messages:
    19
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    hey mike, I tried both of your code, it is working exactly the way I want. But mine is a little bit different than both of your codes, my second select box and third select box are created on the fly. I modified my code based on the logic from your code, would you mind help me taking a look at it?
    
<script type="text/javascript">

function getSubCat(PID) {
    var category = $(PID);
    var url = 'http://kewei-desktop:3000/admin/subcategories/category/' + category.value;
    var divIdName = "category_"+category.value+"_children";
   
    new Ajax.Request( url, 
        { 
         method: 'post',
         onSuccess: function(transport) {
             var response = transport.responseText;
             var tmp1 = document.createElement("div");
             tmp1.setAttribute("class", "SubCategory");
             tmp1.setAttribute("id", divIdName);
             tmp1.innerHTML = response;
             if ( response.length > 4 ) {              
                 tmp1.innerHTML = response;
                 $("linkInfo").removeChild($("linkInfo").lastChild);    
                 $("linkInfo").appendChild(tmp1);
                 /*SubCatEvent('children');*/
             }
             else {
                 $("linkInfo").removeChild($("linkInfo").lastChild);
                 $("linkInfo").appendChild(tmp1);
             }
         }
        }
    )
}

function SubCatEvent(CID) {
    Event.observe( CID, 'click', function() { getSubCat(CID); } );
    Event.observe( CID, 'keypress', function() { getSubCat(CID); } );
    getSubCat(CID);
}

</script>
    Code (markup):
    Thank you for your code and helps
     
    jj0914, Aug 15, 2007 IP