Question

我正在尝试做三个选择，根据前一个输入显示不同的选项。他们都从MySQL查询中获取选项。

第一个选择始终相同且永不变化，第二个选择应检查第一个选项中提供的答案，然后显示相应的答案，第三个应该执行相同的听取第二个选择。

到目前为止，我已经创建了以下代码：

<?php
        $res = CommonFunctions::returnPrimario();
        foreach($res as $dato){
            echo '<option value = "' .$dato. '">' . ucwords($dato) .'</option>';
        }
    ?>
</select>
<select name = "secundario" id = "secundario">
    <?php
        $res = CommonFunctions::returnSecundario();
        foreach($res as $dato){
            echo '<option value = "' .$dato. '">' . ucwords($dato) .'</option>';
        }
    ?>
</select>
<select name = "nombre" id = "nombre">
    <?php
        $res = CommonFunctions::returnEjercicio();
        foreach($res as $dato){
            echo '<option value = "' .$dato. '">' . ucwords($dato) .'</option>';
        }
    ?>
</select>

非常感谢您提供的任何帮助。

提前谢谢。

Answer 1

您需要使用javascript在选择下拉列表中放置一个监听器。＆＃34;平变化＆＃34;事件将是适当的，例如。

var primario = document.getElementById("primario");

// add event listener to the <select> tag
primario.addEventListener("change", function(){
    // function to determine the second dropdown
});

在确定第二个和第三个下拉列表时，您可以将ajax用于您的服务器，例如

primario.addEventListener("change", function(){
    var http = new XMLHttpRequest();
    var url = "yourpage.com/target/page";

    // send value of the first dropdown list
    var params = "primarioValue=" + this.value;
    http.open("POST", url, true);

    //Send the proper header information along with the request
    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    http.setRequestHeader("Content-length", params.length);
    http.setRequestHeader("Connection", "close");

    //Call a function when the state changes.
    http.onreadystatechange = function() {

        if(http.readyState == 4 && http.status == 200) {

            // Change the list of second dropdown 
            // provided your response is already wrap it in appropriate <option> tag
            document.getElementById("secundario").innerHTML = http.responseText;
        }
    }
    http.send(params);
});

对第二次下拉菜单做同样的事情。

另一种选择是将所有选项存储在javascript（JSON）中并在事件监听器中运行过滤逻辑

我建议你使用jQuery来简化你的过程（但不要依赖你的生活）。

希望它有所帮助！

三个HTML选择哪个选项取决于之前的选项

1 个答案: