add ID for each selection

Hi,

Currently i need some help on IDs of forms which are generated by php.

I have a list of forms with jquery nested select boxes:

<select  name="site_id" id="site_id1">
<option value="4">drop1</option>
<option value="5">droptwo</option>
<option value="6">thirddrop</option>
</select>
<select  name="kat" id="categories1">
</select>

<select  name="site_id" id="site_id2">
<option value="4">drop1</option>
<option value="5">droptwo</option>
<option value="6">thirddrop</option>
</select>
<select  name="kat" id="categories2">
</select>

<select  name="site_id" id="site_id3">
<option value="4">drop1</option>
<option value="5">droptwo</option>
<option value="6">thirddrop</option>
</select>
<select  name="kat" id="categories3">
</select>

HTML:

And I have a javascript code for autopopulate categories field regarding to site_id selection, it gets data from other php script:

$(function() {
	$("select#site_id").change(function(){
		$.getJSON("ajax.php",{site_id: $(this).val()}, function(j){
			var options = '';
			for (var i = 0; i < j.length; i++) {
				options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
			}
			$("#categories").html(options);
			$('#categories option:first').attr('selected', 'selected');
		})
	})			
})

HTML:

You see there are ids for every site_id select box and same id for categories auto-polated select box. I need this javascript to autopopulate categories select boxes regarding to site_id selection and it have to work with different ids for every selectbox bundle.
So while I select one site_id5 it have to auto-populate only categories5 selectbox.

 

P.S. This javascript code works OK for one selectbox without id

 

You want to change your initial jquery querey.

$("select.site_id").change(function...

Code (markup):

This is because 1) you aren't selecting any elements with just id="site_id".

Now what you want to do inside of it, to find the site_id is do the following above your $.getJSON

var id = $(this).attr("id");

Code (markup):

That will get the whole "id" name of that selectbox.. if you want the number, just do some substr

var id = $(this).attr("id").substr(7);

Code (markup):

Ta da you got your id # that you had wanted.

 

Actually i did something more better:

$(function() {
	for (z = 0; z < 100; z++) {
		$("select#site_id" + z ).change(function(){
			$.getJSON("ajax.php",{site_id: $(this).val()}, function(j){
				alert();
				var options = '';
				for (var i = 0; i < j.length; i++) {
					options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
				}
				$("#categories" + z).html(options);
				$("#categories" + z + " option:first").attr("selected", "selected");
			
			})
		})
	}
})

HTML:

But I can`t make it work because categories variable 'z' is differs site_ids variable 'z' and on change of category it retrews data but changes some other category selectbox, not which I need. so i need to specify exact categories select-box somehow.

 

As i see in your example I can get only id numbers from 0 to 9 but will not work with two letter ids.
The problem in my example is that JSON not waits for respond of JSON and continues execution of script and while it gets data it sets it into different select box with different id. :S Any solution ?

 

1) ur missing all of your semi-colons after your functions - remember to put those.

2) you do not need to wrap this inside of a for loop - jquery will bind the function to everything that can be called within the selectors you place, so remove them. With that said, remove the outer $(function() {

3) You didn't even make any changes I asked for.. why would you not try my code changes and see what happens?

4) if inside your getJSON call you are looking for the SELECTED option's value, than instead of the var id I created above, do this.

var option = $(this).find("option:selected").val();

Code (markup):