0

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();
    }
});
4

1 に答える 1

0

簡単にするために、このようなものを試してください。それらすべてに同じクラスを与えますが、ブランドまたはシリーズにはidを使用します。申し訳ありませんが、テストせずにこれを書いていますが、すべての機能を1に移動できます。基本的な考え方を微調整する必要があります。また、静的変数でそれを複雑にしすぎているかもしれません。しかし、少なくとも値を追跡することはできます。

$(".series_select").change(function(){
var value = $(this).val(),
    type = $(this).attr('id'),
    data,
    self = $(this);
    if(type == "brand"){
    data = "brand=" + value;
    $(".series_select").change.brand = value;
   } else if (type == "series"){
    data = "brand=" + $(".series_select").change.brand + "&series=" + value;
    $(".series_select").change.series = value;
   } else if( type == "submit"){
      if($(".series_select").change.brand != '' && $(".series_select").change.series != ''){
      $('#userVideos').submit();
       return;
      }
 }

    $.ajax({
        type: "GET",
        url: "model.php",
        data: data,
        success: function(html){
            self.html(html);
        }
        });
    });
于 2012-07-25T01:06:30.557 に答える