Question

我的表格上有三个选择。

每个都取决于前一个的值。

我的意思是有一个下拉列表，其中包含类别， 汽车品牌 和 汽车模型 。

带有汽车品牌的清单必须显示所选类别的品牌。汽车模型也包括所选品牌的型号。

表单HTML，服务器语言是PHP，我想使用Ajax JQUERY来获取select的值。

请帮助它应该如何？

Answer 1

你应该这样做：

   jQuery(function($) {
var brands = {
    'Trucks': ['Ford', 'Chevrolet'],
    'Cars': ['Honda', 'Volkzwagen'],
}

var models = {
    'Ford': ['Model1', 'Model2'],
    'Chevrolet': ['Model3', 'Model4'],
    'Honda': ['Model5', 'Model6'],
    'Volkzwagen': ['Model7', 'Model8'],
}

var $brands = $('#brand');
var $models = $('#model');


$('#category').change(function () {
    var category = $(this).val(), brnds = brands[category] || [];

    var html = $.map(brnds, function(brnd){
        return '<option value="' + brnd + '">' + brnd + '</option>'
    }).join('');
    $brands.html('<option>Select</option>'+html)

    $models.html('');

});

$('#brand').change(function () {
    var brand = $(this).val(), mdls = models[brand] || [];

    var html = $.map(mdls, function(mdl){
        return '<option value="' + mdl + '">' + mdl + '</option>'
    }).join('');
    $models.html(html)
});
  });

检查此JSFiddle：http://jsfiddle.net/minijavi19/2pza5/1908/

当然，如果你想使用Ajax，你应该用它来设置你的变量。

Answer 2

感谢所有关注我的问题的人！但我希望与我分享我的解决方案。有3个文件：index.php，ajax-queries.js，php-funcs.php。

//index.php
$categories = $mysqli->query("SELECT category_id, category_name FROM 
categories") or die($mysqli->error);
<form action="../../php/admin_funcs.php" method="post">
    <select id="cat_slc" class="lists" name="category" >
        <option disabled selected>Выберите категорию</option>
        <?php
        while ($crow = $categories->fetch_assoc())
        {
            echo "<option 
          value='".$crow['category_id']."'>".$crow['category_name']."
                  </option>";
        }
        ?>
    </select>
    <select id="marka_slc" class="lists marka-select" name="marka" >
        <option disabled selected>Выберите марку</option>
    </select>
    <select id="model_slc" class="lists model-select" name="mode">
        <option disabled selected>Выберите модель</option>
    </select>
</form>

//ajax-queries.js
$('#cat_slc').change(function () {
var cat_id = $(this).val();
var url = '../../php/data_functions.php';
$('#marka_slc').load(url + '#mark-block', {cat_id: cat_id}, function () {
    $('.marka-select').fadeIn('slow');
  });
});

$('#marka_slc').change(function(){
 var mark_id = $(this).val();
 var url = '../../php/data_functions.php';
$('#model_slc').load(url + '#model-block', {mark_id: mark_id}, function (){
   $('.model-select').fadeIn('slow');
 });
});

//php-funcs.php
<?php
require_once "db_connect.php";

function GetMarkas(){
global $mysqli;
$category_id = $_POST['cat_id'];
$query = "SELECT marka_id, marka_name FROM marka WHERE category_id = 
'".$category_id."'";
$result = $mysqli->query($query);
$data = '';
while ($row = $result->fetch_assoc()){
    $data .= "<option value='".$row['marka_id']."'>".$row['marka_name']."
</option>";
}
return $data;
}
function GetModels(){
global $mysqli;
$mark_id = $_POST['mark_id'];
$query = "SELECT model_id, model_name FROM model WHERE marka_id= 
'".$mark_id."'";
$result = $mysqli->query($query);
$data = '';
while ($row = $result->fetch_assoc()){
    $data .= "<option value='".$row['model_id']."'>".$row['model_name']."
</option>";
}
return $data;
}


if(isset($_POST['mark_id'])){
  echo"<div id='model-block'>" .  GetModels() . "</div>";
}
else if(isset($_POST['cat_id'])){
  echo"<div id='mark-block'>" .  GetMarkas() . "</div>";
}

我的表格上有三个选择。每个都取决于前一个的值

2 个答案: