Reputation: 23
I'm extremely new to jQuery and JS. I've looked around a bit and haven't found an answer that clicks in my head.
I'm doing the typical one dropdown content depends on another's choice. I have it completely working except the part where it pulls the variable from the first dropdown box.
Here's what I have for code:
HTML:
<p>Processor Assignment *<br><small>Please Choose the Processor whom you are assigning this Serve. Only Network Member Providers are shown in this list.</small></p>
<select name="assigned_to" id="assigned_to">
<option value="2">test</option>
<option value="3">Test_Processor</option>
</select>
<p>Service Type*</p>
<p id="services_list">Please choose a processor.</p>
The JS:
$(document).ready(assigned_to_selectbox_change);
function assigned_to_selectbox_change() {
$('#assigned_to').change(update_services_list);
}
function update_services_list() {
var processor_id = $('#assigned_to').attr('value');
$.get('http://example.com/path/to_ajax/method/' + processor_id, show_services_list);
}
function show_services_list(services) {
$('#services_list').html(services);
}
if I hardcode it, IE http://example.com/path/to_ajax/method/3
this all works swimmingly. Everything populates as expected.
Any idea why it's not picking up the assigned_to value? I have confirmed that PHP/MySQL/etc is working correctly and returning correct results when a variable is passed.
Upvotes: 1
Views: 53
Reputation: 27022
Try .val()
instead of .attr('value')
:
var processor_id = $('#assigned_to').val();
Also, if there isn't a specific reason you're splitting your code into so many functions, I find this to be more concise:
$(document).ready(function() {
$('#assigned_to').change(function() {
$.get('http://example.com/path/to_ajax/method/' + this.value, function(services) {
$('#services_list').html(services);
});
});
}));
Upvotes: 4