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

【问题标题】：repopulating multiple select form with a drop down form through ajax通过ajax使用下拉表单重新填充多选表单
【发布时间】：2014-06-03 08:45:38
【问题描述】：

我想通过选择一个下拉值来使用 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 获取值..但我想在不通过另一个页面和重定向的情况下做到这一点。

【问题讨论】：

你有什么问题？
我需要一个 jquery.ajax 代码，但我不知道从哪里开始......我通过 $_POST 获取价值......但我想不经过另一个页面和重定向。

标签： javascript php jquery ajax forms

【解决方案1】：

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

那你需要了解HTML DOM

然后你需要了解Select DOM Object

混合这些将教你如何弄清楚你的问题。

【讨论】：

【解决方案2】：

在第一个下拉列表#des_pos 选择事件中将 ajax 帖子发送到 php 页面，如下所示。

 $("#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>"));
  });
 }
})
});

【讨论】：