Question

我正在尝试创建一个组合框，当更改另一个组合框时，它将使用数据库中的信息动态更新。我找到了很多解决方案，这些解决方案似乎与我现有的解决方案不符，并且对下一步的工作一无所知。

我已经尝试简化代码以找出哪个部分不起作用，我尝试了很多不同版本的代码，我只知道我现在拥有的某些版本可以工作，而有些则不能。

编辑：更好的代码（希望如此）

数据库连接（root / config / config.php）

<?php
    define("DB_HOST", "10.172.16.4");
    define("DB_USER", "test2_user");
    define("DB_PASS", "password");
    define("DB_NAME", "test2");

    $dsn = "mysql:host=".DB_HOST.";dbname=".DB_NAME;
    $options = [PDO::ATTR_PERSISTENT => true, PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION];
    try { 
        $pdo = new PDO($dsn, DB_USER, DB_PASS, $options);
    } catch (PDOException $error) {
        echo "Connection error: " . $error->getMessage();
        die();
    }
?>

标题（root / online / templates / header.php）

<!DOCTYPE  HTML>
<HTML>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/javascript.js"></script>
</head>
<body>

表单（root / online / create.php）

<?php
    require_once "templates/header.php";
    require_once "../config/config.php";
 ?>
<form method="post" action="">
    <label for="choose_type">Type</label>
    <select name="choose_type_modele" id="choose_type" onchange="selectMarque()" required>
        <option value="">Select Type</option>
        <?php
            $sql = "SELECT id, name FROM typeMateriel";
            if($stmt = $pdo->prepare($sql)) {
                if($stmt->execute()){
                    $typeMateriel = $stmt->fetchAll();
                }
            }
            foreach($typeMateriel as $foundType){
                $typeMateriel_id = $foundType['id'];
                $typeMateriel_name = $foundType['name'];
        ?>
        <option value="<?= $typeMateriel_id; ?>"><?= $typeMateriel_name; ?></option>
        <?php } ?>
    </select>
    <label for="choose_marque">Marque</label>
    <select name="choose_marque_modele" id="choose_marque" required>
        <option value="">Select type first</option>
    </select>
</form>
<p id="test"></p>
<?php require_once "templates/footer.php"; ?>

函数（root / online / js / javascript.php）

function selectMarque() {
    var typeID = $('#choose_type').val();
    var post_id = 'id='+ typeID;
    document.getElementById("test").innerHTML = "You Selected " + typeID;
        if(typeID){
            $.ajax({
                type:'POST',
                url:'../ajax_marque.php',
                data:post_id,
                success:function(marque){
                    $('#choose_marque').html(marque);
                }
            });
        }else{
            document.getElementById("choose_marque").innerHTML = '<option value="">Select type first</option>';
        }
};

动态资料的代码（root / online / ajax_marque.php）

<?php
include('../config/config.php');
if($_POST['id']){
    $id=$_POST['id'];
    if($id===0){
        echo "<option>N/A</option>";
    } else {
        $sql = "SELECT marqueMateriel.id,marqueMateriel.name FROM type_marque, marqueMateriel WHERE marqueMateriel.id=type_marque.marqueMateriel_id AND type_marque.typeMateriel_id= :typeMateriel_id";
        if($stmt = $pdo->prepare($sql)) {
            $stmt->bindParam(':typeMateriel_id', $id, PDO::PARAM_INT);
            if($stmt->execute()){
                $marqueMateriel = $stmt->fetchAll();
            }
        }
        echo "<option>Select Marque</option>";
        foreach($marqueMateriel as $foundMarque) {
            $marqueMateriel_id = $foundMarque['id'];
            $marqueMateriel_name = $foundMarque['name'];
            echo "<option value='<?php $marqueMateriel_id; ?>'><?php $marqueMateriel_name; ?></option>";
        }
    }
}
?>

关闭（root / online / template / Footer.php）

</body>
</html>

第一个组合框就可以了，就是这样。一切都没有改变，我敢肯定我在某处缺少什么。我可以使用该函数来发出alert（typeID），但它不能更改数据：/

编辑：试图变得更有意义？

组合框“ choose_type_modele”有效，它包含表“ typeMateriel”中的所有内容。当我选择某物时，它不会更改第二个框“ choose_marque_modele”。之所以调用onchange函数，是因为在选择带有适当ID的“ test”时对其进行了修改。如果我将其复制到“ create.php”中并手动告诉它“ $ id”是什么，那么“ ajax_marque.php”中的代码将起作用，但不会自动执行。我觉得问题出在“ javascript.js”中代码的$ .ajax部分，但我似乎无法弄清楚哪一部分是错误的。

任何帮助将不胜感激。

Answer 1

我不认为您是否可以使用html方法向选择添加选项。您必须创建option对象才能添加select对象。为此，您需要将ajax方法的响应更改为JSON对象。

var selectMarque = function() {

  // Remove current options from matque
  $('#choose_marque').find("option").remove();

  var typeID = $('#choose_type').val();
  var post_id = 'id=' + typeID;

  // There will be always value in post_id
  // You have to check typeID to be sure if type picked

  if (typeID) {

    // sample ajax data
    var testData = [{
        "value": "1",
        "text": "Option 1"
      },
      {
        "value": "2",
        "text": "Option 2"
      },
    ];

    // for each option data in testData
    $.each(testData, function(offset, optionData) {
      // append an option to select
      $('#choose_marque').append($('<option>', {
        value: optionData.value,
        text: optionData.text
      }));
    });

  } else {
    // if empty value picked as type
    // add sample option to marque

    $('#choose_marque').append($('<option>', {
      value: "",
      text: "Select Type To Fill"
    }));
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="choose_type_modele" id="choose_type" onchange="selectMarque()" required>
  <option value="">Select Type</option>
  <option value="1">Fill Select</option>
</select>

<select id="choose_marque" required>
  <option value="">Select Type To Fill</option>
</select>

Answer 2

我的代码中有两个错误导致无法工作，即ajax代码的url和成功部分。

工作代码：

            $.ajax({
                type:'POST',
                url:'ajax_marque.php',
                data:post_id,
                success:function(data){
                    $('#choose_marque').html(data);
                }
            });

由于某种原因，我使用了“ marque”而不是数据（我可能已经更改了它，以为是其他东西？），URL是“ ../ajax_marque.php”。我以为我必须从javascript.php文件所在的位置添加网址，而不是从被称为（create.php）的位置添加网址。

动态组合框不会更新

2 个答案: