jQuery / AJAX自动填充值

时间:2012-07-24 23:56:03

标签: jquery ajax submit

我遇到了 jQuery AJAX 的问题。 我有3个选择标签,其值通过 AJAX 填充。

这是我需要的情况。

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

当然提交后一切都重置了。我不想这样,所以我把选择标签中的选中。现在我不知道如何“直播”从第一个和第二个选择标记中读取,以便在提交选项保持填充后。

以下是我的代码 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();
    }
});

1 个答案:

答案 0 :(得分: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);
        }
        });
    });