Link to home
Create AccountLog in
Avatar of Panos
PanosFlag for Germany

asked on

Jquery -related selects

Hello experts
I need help with my code to create related selects without using any plugin.
I have 1 parent selectbox and the number of childs can be "n". So i'm puting the parent and than try to create the other elements in two ways:
1. The first way is to put the first select in a <div id="divid_1">.
  call my action page and get a new div with the select box inside.
2.The second way is instead of getting a new div and the select, i'm calling direct the function to get the values of the options.

1.Both ways have the problem that the script is not working for the child select
2. I'm getting a value of 11 instead of 2 for var k (var k = n + a;)

Any help?
<div id="divid_1">
<select  name="part_1" id="part_1" class="partselect"  size="10">
 <option value="-1" selected="selected">Plrase select</option>
  
  <option value="1" >test &raquo;</option>
  
  <option value="618" >test &raquo;</option>
  
  <option value="713" >test &raquo;</option>
  
  <option value="823" >test &raquo;</option>
  
  <option value="861" >test &raquo;</option>
  
 <option value="19999" >Other</option>
</select>
</div>
<div id="loader" style="display:none;"></div>
<script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
<script language="javascript">
$(".partselect").change(function () {
    var target = $(this).attr("id");
    var i = target.split("_"); //split to get the index
    var n = i[1]; //index of selectbox
    var a = 1
    var k = n + a;
    var curdiv = "divid_" + n;
    var nextdiv = "divid_" + (n + 1);
    $("#" + nextdiv).empty();
    var optval = $("#" + target + " option:selected").val(); // option value
    b = "getsub=" + optval + "&next=" + k;
    $("#loader1").show();
    /*1. Call a page that craete the select tag inculded the option list
	 and put the content into a new div*/
    /*$.post("functions/getsubpart.cfm", b, function (d, c) {
	$("<div id=" + nextdiv +"></div>").insertAfter('#' + curdiv);
		$("#" + nextdiv).html(d);
        });*/
    /*2.Call directly the function to get the option values in an array
	 and create a new select box, */
    $.post("com/categories_parts.cfc?method=fgetsubsarray&returnformat=json", b, function (d, c) {
        $("<select class='partselect'  size='10' name=part_" + k + " id=part_" + k + " ></select>").insertAfter('#' + target);
		if(!d== 'false'){
        optionslist = d;
        alert(optionslist);
        var output = [];
        $.each(optionslist, function (key, value) {
            output.push('<option value="' + key + '">' + value + '</option>');
        });
          $('#part_' + nextdiv).html(output.join(''));
		}else{
		}
    });
    return false
});
</script>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
See answer
Avatar of Panos

ASKER

Hi ChrisStanyon
The second part is fixed now.
Any idea why the .change(function () ... is not working for the childs?
SOLUTION
Link to home
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
Avatar of Panos

ASKER

It is working now.Thank you.
I will close this question because it has been is answered and i will open a new one with some new problems
Avatar of Panos

ASKER

Thank you
regards
panos