I have a problem with jQuery and AJAX. I have 3 select tags with values which are populated through AJAX.
Here is the case I need.
When I select option on first select tag I get specific values in the second select tag. Then when I select option on second tag I get specific values in the third select tag. After I select option in third select tag - submit happens. This part works.
Of course after submit everything resets. I didn't want that so I've put selected in select tag. Now I don't know how to "live" read from first and second select tag so that after submit options stays populated.
これが私のコードPHP/HTMLコードです:
<form action="<?php echo $PHP_SELF; ?>" method="POST" name="userVideos" id="userVideos" style="width: 580px; margin-left: 5px; margin-bottom: 2px;">
<select name="brand_select" id="brand_select" style="width: 140px; margin-right: 20px;">
<option value="">Select Brand</option>
<?php
$query_brands = mysql_query("SELECT DISTINCT brand FROM users_video WHERE location = '2' ORDER BY brand");
while ($row = mysql_fetch_object($query_brands))
{
$name = $row->brand;
$sel = ($_POST['brand_name'] == $name) ? "selected='selected'" : "";
echo "<option value='{$row->brand}' $sel>{$row->brand}</option>";
}
?>
</select>
<input type="hidden" value="<?php echo htmlspecialchars($_POST['brand_select']); ?>" name="brand_name" id="brand_name"/>
<select name="series_select" id="series_select" style="width: 140px; margin-right: 20px;" disabled>
<option value="">Select Series</option>
<?php
//TODO: finish code tidification
$sel = ($_POST['series_name'] != "") ? "selected='selected'" : "";
echo "<option value='" . htmlspecialchars($_POST['series_name']) . "' $sel>" . htmlspecialchars($_POST['series_name']) . "</option>";
?>
</select>
<input type="hidden" value="" name="series_name" id="series_name"/>
<select name="model_select" id="model_select" style="width: 140px; margin-right: 20px;" disabled>
<option value="">Select Model</option>
<?php
$sel = ($_POST['model_name'] != "") ? "selected='selected'" : "";
echo "<option value='" . htmlspecialchars($_POST['model_name'] != "") . "' $sel>" . htmlspecialchars($_POST['model_name']) . "</option>";
?>
</select>
<input type="hidden" value="" name="model_name" id="model_name"/>
</form>
そして、ここに私のjQueryコードがあります:
jQuery(document).ready(function(){
var brand = "";
var series = "";
var model = "";
var _brand = "";
_brand = $('#brand_name').val();
$("#brand_select").live("change", function(){
brand = $('select#brand_select').val();
if (brand == "" && _brand == "")
{
$('select#series_select').attr('disabled','disabled');
$('#model_select').attr('disabled','disabled');
}
else
{
$('select#series_select').removeAttr('disabled');
$('#brand_name').val(brand);
var grbData = $.ajax({
type: "GET",
url: "series.php",
data: "brand=" + brand,
success: function(html){
$("#series_select").html(html);
}
});
}
});
$("#series_select").change(function(){
series = $('select#series_select').val();
if (series != ""){
$('#model_select').removeAttr('disabled');
$('#series_name').val(series);
var newData = $.ajax({
type: "GET",
url: "model.php",
data: "brand=" + brand + "&series=" + series,
success: function(html){
$("#model_select").html(html);
}
});
}else{
$('#model_select').attr('disabled','disabled');
}
});
$("#model_select").change(function(){
model = $('select#model_select').val();
if (model != ""){
$('#model_name').val(model);
$('#userVideos').submit();
}
});