Question

我在php表单提交页面上有两个选择下拉列表。第一个下拉菜单是基本的，显示/隐藏了第二个下拉菜单。第二个下拉列表是类别/过滤器列表，由提取pdo循环填充。我试图根据用户在第一个下拉列表中选择的内容自动选择第二个下拉列表（类别）。

我尝试根据第一个下拉列表填充第二个，但是对于这些，您必须分配一个要排序的值，并且下拉列表的值（id）由数据库自动循环填充，因此我无法计算了解如何从每个类别中获取单个值（Echo out values in foreach loop）或如何在jquery中引用php值。（populate second dropdown based on selected value of first dropdown）

我做过的其他研究： What's the best and easiest way to Populate a dropdown based on another dropdown https://www.daftlogic.com/information-programmatically-preselect-dropdown-using-javascript.htm

这是我交付该项目之前需要为该项目开发的最后一个功能，而我只是在学习后端开发-我一直在努力解决这一问题，并进行了数小时的研究和实施。我将非常感谢您提供的任何指导。我在jquery或javascript方面不强。

我的数据库类别：

tbl_category
|------------------|
|cat_id | cat_name |
|------------------|
|1      | One      |
|------------------|
|2      | Two      |
|------------------|
|3      | Three    |
|------------------|
|4      | Four     |
|------------------|
|5      | Jeopardy |
|------------------|
|6      | Final    |
|------------------|

我的代码（admin_addquestion.php）：


<?php
require_once 'scripts/config.php';
confirm_logged_in();

$cat_tbl            = 'tbl_category';
$product_categories = getAll($cat_tbl);

if (isset($_POST['submit'])) {
$cat     = $_POST['catList'];

$result  = addQuestion($cat);        
        $message = $result;
    }

?>

<script>

$(function() {
        $('.questionselector').change(function(){
            $('.rounds').hide();
            $('#' + $(this).val()).show();
        });
    });
</script>

<form  action="admin_addquestion.php" method="post" enctype="multipart/form-data" class="md-form">


<Select class="questionselector">
   <option value="none">Select a Question Type</option>

   <option value="one">Round One</option>
   <option value="two">Round Two</option>
   <option value="three">Round Three</option>
   <option value="four">Round Four</option>
   <option value="five">Round Five</option>
   <option value="six">Final Round</option>

</Select>

<select name="catList" id="catlist select" class="mdb-select md-form mb-4 initialized" >
        <option value="" disabled selected>Insert into Category...</option>
        <?php while ($product_category = $product_categories->fetch(PDO::FETCH_ASSOC)): ?>
<option value="<?php echo $product_category['cat_id']; ?>">
    <?php echo $product_category['cat_name']; ?> 
</option>
<?php endwhile; ?>
    </select>

<div id="one" class="rounds" style="display:none">
content
</div>

<div id="two" class="rounds" style="display:none">
content
</div>

<div id="three" class="rounds" style="display:none">
content
</div>

<div id="five" class="rounds" style="display:none">
content
</div>

<div id="six" class="rounds" style="display:none">
content
</div>

<button class="btn btn-outline-info btn-rounded btn-block z-depth-0 my-4 waves-effect" type="submit" name="submit">Submit</button>

</form>

当前，用户从第一个下拉菜单（第一个，第二个回合等）中选择一个回合，然后他们必须从第二个下拉菜单（一个，两个，三个）中独立选择将内容/问题插入哪个类别/回合，四，五，六，决赛）。数据库已经填充了第二个下拉菜单的选项。我希望用户能够选择一个回合，并根据他们从第一个选择/下拉列表中的选择自动选择第二个下拉列表。（例如，用户选择“第一轮”，然后在第二个下拉菜单中，已经为他们选择了“第一轮”。）

Answer 1

如果您可以更改初次选择的值和回合div的ID，这会更容易。但是，如果不能，则可以使用switch语句并将数字值分配给目录列表选择列表。

<script>

    $(function() {




            $('.questionselector').change(function(){
                var roundNumber;


                switch($(this).val())
                {
                    case "one":
                         roundNumber = 1;
                         break;
                    case "two":
                         roundNumber = 2;
                         break;
                    case "three":
                         roundNumber = 3;
                         break;
                    case "four":
                         roundNumber = 4;
                         break;
                    case "five":
                         roundNumber = 5;
                         break;
                    case "six":
                         roundNumber = 6;
                         break;
                }


                $('.rounds').hide();
                $('#' + $(this).val()).show();
                $('#catlist').val(roundNumber);
            });
        });
    </script>

Answer 2

我的回答是一个非常基本的示例，说明了如何使用Ajax请求创建第二个选择列表。

MAIN.PHP

<script>
 function ajax( id ) {
    var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("new_select").innerHTML =
      this.responseText;
    }
  };
    var url = '/test.php?id='+id;
    if( id ) {  
        xhttp.open("GET", url, true);
        xhttp.send();
    }
 }
</script>
<div>
    <select onchange="ajax( this.value );">
        <option>select something</option>
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
        <option value="snake">Snake</option>
    </select>
</div>
<div id="new_select">
</div>

TEST.PHP

<select>
<?php

/* pretend the below arrays came from your database instead */
$array['dog'] = array( "Great Dane", "Labrador", "Husky", "German Shepherd" );
$array['cat'] = array( "Siamese", "Main Coon", "Siberian Shorthair" );
$array['snake'] = array( "Python", "Cobra", "Taipan", "King Brown" );

echo "<option>select something</option>";
foreach( $array[$_GET['id']] as $option ) {
    echo "<option>" . $option . "</option>";
}
?>
</select>

此处的代码：

onchange="ajax( this.value );

将所选值发送到ajax请求。依次使用GET将其发送到test.php。从那里，您可以使用GET变量从数据库中获取数据。这是一个非常基本的ajax示例，不适合生产环境。但这应该可以让您到达需要的地方。

要查看其实际效果：https://xisse.com/main.php

如何基于第一个html下拉列表选择

2 个答案: