通过ajax使用下拉式表单重新填充多选表单

Question

我想用ajax从数据库中重新填充一个多选表单，只需选择一个下拉值。

下面是下拉菜单的代码：

    <?php 
    $sql2 = "select _id, title from sub_category order by title;";
    $sel2 = mysqli_query($connect,$sql2);
    $array2 = array();
    while($row2 = mysqli_fetch_assoc($sel2)){
      $array2[] = $row2;
    }
    ?>

       <div class="span2">
            <select name="des_pos" id="des_pos">
               <?php
                  foreach($array2 as $value2){ ?>

                  <option value ="<?php echo $value2['_id']; ?>" <?php if($value2["title"] == $desired_position){ echo 'selected="selected"';} ?>><?php echo $value2['title']; ?> </option>

                  <?php

                  }
                  ?>
            </select>
        </div>

下面是多选表单的代码：

$sql4 = "SELECT _id, score_type from test_category where sub_code='$des_pos_id'";

  $sel4 = mysqli_query($connect,$sql4);

  $array4 = array();

  while($row4 = mysqli_fetch_assoc($sel4)){

      $array4[] = $row4;

  }

            <select name = 'test_tags[]' multiple>
            <?php

            foreach($array4 as $value4){ ?>

            <option value ="<?php echo $value4['_id']; ?>" <?php echo in_array($value4['_id'], $test_tag) ? 'selected="true"' : null; ?>><?php echo $value4['score_type']; ?></option>

            <?php

            }
            ?>
            </select>

所以我想要的输出是，多选表单的值应该根据下拉菜单上的选择而改变…

我需要一个jquery.ajax代码，但我不知道从哪里开始...我正在通过$_POST获取值。但是我想在不经过另一个页面和重定向的情况下完成。

Answer 1

一些有用的东西: AJAX教程：W3schools ajax tutorial

然后，您需要了解HTML DOM

然后，您需要了解Select DOM Object

将它们混合在一起会教你如何解决你的问题。

Answer 2

在第一个下拉列表中，php select event将ajax post发送到#des_pos页面，如下所示。

 $("#des_pos").select(function(e){
 $.ajax({
   url:"getdropdata.php",
   dataType:"json",
   success: function(data){
     $.each(data,function(index,value){
      $("#multiselect").append("<option value="+value+">"+value+"</option>"));
  });
 }
})
});