Panos
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?
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 »</option>
<option value="618" >test »</option>
<option value="713" >test »</option>
<option value="823" >test »</option>
<option value="861" >test »</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>
ASKER CERTIFIED SOLUTION
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
SOLUTION
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
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
I will close this question because it has been is answered and i will open a new one with some new problems
ASKER
Thank you
regards
panos
regards
panos
ASKER
The second part is fixed now.
Any idea why the .change(function () ... is not working for the childs?