Question

我正在创建一个具有2个彼此互连的选择列表的界面，所以我想要的是：

如果用户在类别保管箱中选择了一个选项，则第二个选择列表将显示该类别中的所有选项。

<hmtl>
<label>Section</label>
<select class="form-control selcls" name="txtsection" id="txtsection" >                                                                                 
<?php
 while ($rows = mysqli_fetch_array($queryResultsec)) { ?>
<option value="<?php echo $rows['Gradelvl_ID'];?>"><?php echo 
$rows['Section_Name'];?></option>
<?php   }
             ?>              
    </select> 


 <label>Section</label>
 <select class="form-control selcls" name="txtsection" id="txtsection" >
 <?php
 while ($rows = mysqli_fetch_array($queryResultsec)) {?>
 <option value="<?php echo $rows['Gradelvl_ID'];?>"><?php echo 
 $rows['Section_Name'];?></option>   <?php  }
             ?>              
    </select>      
</hmtl>

Answer 1

试用此代码：

＆＃13;

$("#select1").change(function() {
  if ($(this).data('options') === undefined) {
    /*Taking an array of all options-2 and kind of embedding it on the select1*/
    $(this).data('options', $('#select2 option').clone());
  }
  var id = $(this).val();
  var options = $(this).data('options').filter('[value=' + id + ']');
  $('#select2').html(options);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select name="select1" id="select1">
      <option value="1">Fruit</option>
      <option value="2">Animal</option>
      <option value="3">Bird</option>
      <option value="4">Car</option>
    </select>


<select name="select2" id="select2">
      <option value="1">Banana</option>
      <option value="1">Apple</option>
      <option value="1">Orange</option>
      <option value="2">Wolf</option>
      <option value="2">Fox</option>
      <option value="2">Bear</option>
      <option value="3">Eagle</option>
      <option value="3">Hawk</option>
      <option value="4">BWM<option>
    </select>

＆＃13;

Answer 2

做一件事 1 - 保持第二次下拉空。 2 - 调用jquery ajax以获得更改时的第一个下拉值创建一个新页面，其中只有数据库连接被限制在sql之后，相对于第一个下拉列表选择值 3 - 获取对ajax方法的响应并获得输出

Answer 3

我根据你的问题拿了一些写代码。在写这篇文章时，我假设你在两个表之间存在关系，你已经存储了类别和选项。我假设关系正在使用“Gradelvl_ID”。我还假设你对JavaScript，jQuery和AJAX有一些了解。

基于此，我创建了以下代码。

这将是您的选择区域。

<hmtl>
    <head>
        <script   src="https://code.jquery.com/jquery-3.2.1.min.js"   integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="   crossorigin="anonymous"></script>
    </head>
    <body>
        <label>Section</label>
        <select class="form-control selcls" name="txtsection" id="cat" >
            <?php
                while ($rows = mysqli_fetch_array($queryResultsec)) { ?>
                    <option id="<?php echo $rows['Gradelvl_ID'];?>"><?php echo $rows['Section_Name'];?></option>
            <?php   }   ?>
        </select>
    <label>Section</label>
        <select class="form-control selcls" name="txtsection" id="options" ></select>
    </body>    
</html>

此脚本使用的是jQuery，因此您需要将jQuery库链接到上一页。您也可以使用<script></script>标记将此脚本放在第一页内，也可以单独附加为.js文件。

$(document).ready(function(){
    $(document).on('change', '#cat', function(){
        $.ajax({
            url: 'getOptions.php',
            type: 'get',
            data: {
                catId: $(this).prop('id')
            }
        }).then(function (response) {
            $('#options').html(response);
        });
    });
})

上面的代码会将选定的ID发送到getOptions.php，其中包含PHP，以根据您选择表中发送的ID号选择所有选项。然后，如果选择成功，它将返回将由上面的AJAX代码捕获的数据，并在第二个下拉列表中绘制选项。

<?php
include_once('dbconnect.php');

//I'm not a big mysqli user
if(!empty($_GET["id"])){
    $results = $conn -> prepare("SELECT * FROM <your table name> WHERE id = ?");
    $results -> bind_param('i', $_GET["id"]);
    $results -> execute();
    $rowNum = $results -> num_rows;

    if ($rowNum > 0){
        while($optRows = $results -> fetch_assoc()){ ?>
            <option id="<?php echo $rows['Gradelvl_ID'];?>"><?php echo $rows['Section_Name'];?></option>
        <?php
        }
    }
}?>

另外，请注意上面的代码。我正在使用准备好的陈述，这是一个非常好的习惯。查阅here。

正如我所说，我假设代码的一部分并使用了您提供的信息，我希望您做更多的研究并使上面的代码适合您。

更改php中的选择值

3 个答案: