0

我对jQuery和AJAX有疑问。我有 3 个选择标签，其值通过AJAX填充。

这是我需要的情况。

当我在第一个选择标签上选择选项时，我会在第二个选择标签中获得特定值。然后，当我在第二个标签上选择选项时，我会在第三个选择标签中获得特定值。在我在第三个选择标签中选择选项后 - 提交发生。这部分有效。

当然，提交后一切都会重置。我不希望这样，所以我已将 selected 放入 select 标记中。现在我不知道如何从第一个和第二个选择标签“实时”读取，以便在提交选项后保持填充。

这是我的代码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 回答