Getting value of a dynamically created select - php

Question

Apologies if my question is a little badly worded but I am not quite sure how to ask it correctly.
I am using PHP to dynamically generate some selects and I was just wondering if it is possible to do this?
Or would I need to add something like {onChange="some_function();"} to each of the selects, passing some variable(s) to id it ?
<script type="text/javascript">
$('Selects ID or class').change(function(event) {
$.post('formupdate.php', { selected: $('Selects ID or class').val() },
function(data) {
$('update the div linked to select').html(data);
}
);
});
</script>
<p>Q1</p>
<select name="Q1select" id="Q1select" class="Q1">
<option value="-">-</option>
<option value="type1">Type One</option>
<option value="type2">Type Two</option>
<option value="type3">Type Three</option>
</select>
<div id="update1" class="Q1"></div>
<p>Q2</p>
<select name="Q2select" id="Q2select" class="Q2">
<option value="-">-</option>
<option value="type1">Type One</option>
<option value="type2">Type Two</option>
<option value="type3">Type Three</option>
</select>
<div id="update2" class="Q2"></div>
<p>Q3</p>
<select name="Q3select" id="Q3select" class="Q3">
<option value="-">-</option>
<option value="type1">Type One</option>
<option value="type2">Type Two</option>
<option value="type3">Type Three</option>
</select>
<div id="update3" class="Q3"></div>
Updated working script :
<script type="text/javascript">
$(document).ready(function () {
$('.question').change(function (event) {
var $this = $(this);
$.post('formupdate.php', { selected:$this.val() },
function (data) {
$('#' + $this.data('div')).html(data);
}
);
});
});
</script>
Updated html :
<select name="select_Q1" id="select_Q1" class="question" data-div="update_Q1">
<option value="-">-</option>
<option value="type1">Type One</option>
<option value="type2">Type Two</option>
<option value="type3">Type Three</option>
</select>
<div id="update_Q1"></div>
<p>Q2</p>
<select name="select_Q2" id="select_Q2" class="question" data-div="update_Q2">
<option value="-">-</option>
<option value="type1">Type One</option>
<option value="type2">Type Two</option>
<option value="type3">Type Three</option>
</select>
<div id="update_Q2"></div>
<p>Q3</p>
<select name="select_Q3" id="select_Q3" class="question" data-div="update_Q3">
<option value="-">-</option>
<option value="type1">Type One</option>
<option value="type2">Type Two</option>
<option value="type3">Type Three</option>
</select>
<div id="update_Q3"></div>

Answer 1

You can assign an event handler to all the select elements using the following:
$('select').change(function(event) {
....
});
​
In the event handler, you can get the value of the select using:
$(this).val()
To get the ID of the select in the event handler, you can use;
$(this).attr('id')

Answer 2

Yes that would work ... but you could simplify a touch :
$('Selects ID or class').change(function(event) {
$.post('formupdate.php', { selected: $(this).val() },
function(data) {
$('update the div linked to select').html(data);
}
);
});
changed the selector within the function to $(this) instead of a class or id that way it will work when you use on multiple elements
To link the select to a div you could either name the div similar to the select ie select id = select_1 and div = div_1 or use the data property
<select name="Q2select" id="Q2select" data-div="divid" class="Q2">
then within your AJAX callback you can do :
$('#' + $(this).data('div')).html(data);
this will set the HTML content of the div with the id = divid ... just an idea
Update
there are a couple of things to try and debug this, first :
function (data) {
$('#update_Q3').html(data);
}
this puts the content in a div - this checks the content returned from the post is working and that you can insert HTML at this point
and try this :
function (data) {
alert($(this).data('div'));
}
this will confirm your selecting the correct div by getting the data
Update 2
My screw up !!!!! $(this) is not working in the callback, try this :
$('.question').change(function (event) {
var $this = $(this);
$.post('formupdate.php', { selected:$(this).val() },
function (data) {
$('#' + $this.data('div')).html(data);
}
);
});
we save $(this) into a variable $this for later use

Answer 3

Here's how I would do it, using a class of question on each <select> and using the id as the unique identifier. The benefit of using a class to grab the selects is if you ever add any other select to the page, they won't be affected.
<script type="text/javascript">
$('.question').change(function(event) {
$.post('formupdate.php', { selected: $(this).val() },
function(data) {
// lets find the div that matches this question and update it
var questionNum = $(this).attr('id').replace('select_Q', '');
var divId = 'update_Q' + questionNum;
$('#' + divId).html(data);
}
);
});
</script>
<p>Q1</p>
<select name="select_Q1" id="select_Q1" class="question">
<option value="-">-</option>
<option value="type1">Type One</option>
<option value="type2">Type Two</option>
<option value="type3">Type Three</option>
</select>
<div id="update_Q1"></div>
<p>Q2</p>
<select name="select_Q2" id="select_Q2" class="question">
<option value="-">-</option>
<option value="type1">Type One</option>
<option value="type2">Type Two</option>
<option value="type3">Type Three</option>
</select>
<div id="update_Q2"></div>
<p>Q3</p>
<select name="select_Q3" id="select_Q3" class="question">
<option value="-">-</option>
<option value="type1">Type One</option>
<option value="type2">Type Two</option>
<option value="type3">Type Three</option>
</select>
<div id="update_Q3"></div>

Answer 4

Yes you could do
//For every select whose id ends with select
$('select[id$=select]').change(function(event) {
//getthe id so that you can post it
var id = this.id;
//save the variable this to another one to use in the callback
var that = this;
//post the selected value and thew id of the select
$.post('formupdate.php', { selected: $(this).val(), id : id },
function(data) {
update the next element after the select
$(that).next().html(data);
}
);
});