使用AJAX和PHP更改组合框选项

Using AJAX and PHP to change combobox choices

本文关键字：组合 选项 AJAX PHP 使用      更新时间：2023-09-26

我整个早上都在努力让我的组合框正确更新。一旦用户在第一个框中选择了一个选项，我想在第二个框中填充适用于第一个选项的选项。我写了一个单独的php脚本，以采取选择的选项，并从sql数据库拉适用的返回。这个脚本运行时很好，但我不能让它工作在javascript使用AJAX

PHP: 

<?php
$name=$_GET['name'];
// select box option tag
$selectBoxOption1 = ''; 
// connect mysql server
$con=mysql_connect('localhost', 'root', '');
if (!$con) { 
    die('Could not connect: ' . mysql_error()); 
}
mysql_select_db('mysql',$con);
$sql1 = "SELECT DISTINCT bike_type FROM bc_fit WHERE name='$name'";
$result1 = mysql_query($sql1);
// play with return result array 
while($row = mysql_fetch_array($result1)){   
    $selectBoxOption1 .="<option value = '".$row['bike_type']."'>".$row['bike_type']."</option>"; 
}
// return options
echo $selectBoxOption1;
?>

Javascript (#nap2是当前框，#nap 4是下一个):

$("#nap2").change(function(event){
    var selected = $(this).find('option:selected').text()
    $('#nap4').removeAttr('disabled');
    $('#nap4').empty();
    //need to get options based upon nap 2 choice by calling php script with selected and returning all unqiue bike under that name
    var options4;
    $.ajax({ 
    type: "GET",
    url: 'getbiketype.php', 
    data: "name"=selected,
    success:  function(data) {
      options4 = data;
    }
    });
    $('#nap4').append($(options4));
});

你的jQuery有几个问题:

<select id="nap2" class="napkeeComponent napkeeCombobox">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="2">Three</option>
</select>
<select id="nap4" class="napkeeComponent napkeeCombobox" disabled>
</select>
<script>
$(document).ready(function() {
    $("#nap2").change(function(event){
        // You just get the value of selected input
        // You don't need to find anything because you've already selected it
        var selected = $(this).val();
        $('#nap4').removeAttr('disabled');
        $('#nap4').empty();
        $.ajax({ 
                type: "GET",
                url: 'getbiketype.php',
                // Your creation of the data object is incorrect
                data: { name: selected },
                success:  function(data) {
                    console.log(data);
                    // Here just append the straight data
                    $('#nap4').append(data);
                }
        });
    });
});
</script>
相关文章：