猿问

动态组合框不更新

我正在尝试制作一个组合框,当另一个组合框更改时,它将使用数据库中的信息动态更新。我发现很多解决方案似乎与我现有的不兼容,并且迷失了下一步该做什么。


我尝试简化代码以找出哪些部分不起作用,我尝试过的代码有很多不同的版本,我只知道我现在拥有的一些版本有效,而有些则无效。


编辑:更好的代码(我希望)


数据库连接(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'];

        ?>


第一个组合框有效,仅此而已。没有任何变化,我确定我在某个地方遗漏了一些东西。我可以使用该函数来发出警报(typeID)并且它会这样做,但不能更改数据:/

编辑: 试图更有意义?

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

任何帮助将不胜感激。


繁星点点滴滴
浏览 180回答 2
2回答

函数式编程

我的代码中有两个错误导致无法工作,ajax 代码的 url 和成功部分。工作代码:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type:'POST',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url:'ajax_marque.php',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data:post_id,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success:function(data){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#choose_marque').html(data);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });出于某种原因,我使用了“marque”而不是数据(我可能已经改变了它认为它是别的东西?)并且 url 是“../ajax_marque.php”。我想我必须从 javascript.php 文件所在的任何地方添加 url,而不是从它被调用的地方 (create.php)。

温温酱

我不认为您是否可以向 select withhtml方法添加选项。您必须创建option对象才能添加select对象。为了实现这一点,您需要将 ajax 方法的响应更改为 JSON 对象。var selectMarque = function() {&nbsp; // Remove current options from matque&nbsp; $('#choose_marque').find("option").remove();&nbsp; var typeID = $('#choose_type').val();&nbsp; var post_id = 'id=' + typeID;&nbsp; // There will be always value in post_id&nbsp; // You have to check typeID to be sure if type picked&nbsp; if (typeID) {&nbsp; &nbsp; // sample ajax data&nbsp; &nbsp; var testData = [{&nbsp; &nbsp; &nbsp; &nbsp; "value": "1",&nbsp; &nbsp; &nbsp; &nbsp; "text": "Option 1"&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; "value": "2",&nbsp; &nbsp; &nbsp; &nbsp; "text": "Option 2"&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; ];&nbsp; &nbsp; // for each option data in testData&nbsp; &nbsp; $.each(testData, function(offset, optionData) {&nbsp; &nbsp; &nbsp; // append an option to select&nbsp; &nbsp; &nbsp; $('#choose_marque').append($('<option>', {&nbsp; &nbsp; &nbsp; &nbsp; value: optionData.value,&nbsp; &nbsp; &nbsp; &nbsp; text: optionData.text&nbsp; &nbsp; &nbsp; }));&nbsp; &nbsp; });&nbsp; } else {&nbsp; &nbsp; // if empty value picked as type&nbsp; &nbsp; // add sample option to marque&nbsp; &nbsp; $('#choose_marque').append($('<option>', {&nbsp; &nbsp; &nbsp; value: "",&nbsp; &nbsp; &nbsp; text: "Select Type To Fill"&nbsp; &nbsp; }));&nbsp; }}<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>&nbsp; <option value="">Select Type</option>&nbsp; <option value="1">Fill Select</option></select><select id="choose_marque" required>&nbsp; <option value="">Select Type To Fill</option></select>
随时随地看视频慕课网APP
我要回答