如何从 Ajax/Jquery 的下拉列表中获取复选框中的数据答案

【问题标题】：How to get data in checkboxes from dropdown list in Ajax/Jquery如何从 Ajax/Jquery 的下拉列表中获取复选框中的数据
【发布时间】：2012-10-05 20:23:39
【问题描述】：

我没有在这里发布完整的代码，但我想知道如何根据下拉列表检索复选框中的数据。我有一个用户下拉列表，以及复选框中的页面数据。

假设表user 有两列（user_id、user），pages 有三列（page_id、user_id、title）。

我希望这些复选框根据所选用户自动选中/取消选中而不刷新页面。假设我正在获取用户

echo '<select name="user_id">';
echo '<option value="">Select User</option>';

$sql = "SELECT * from users";
$res = mysql_query($sql);
while($row = mysql_fetch_assoc($res)) {
    $uid = $row['user_id'];
    $user = $row['user'];
    echo '<option value="'.$uid.'">'.$user.'</option>'; 
}

echo '</select>';

以及基于选定用户的复选框中的数据（确保user_id 在IF condition 中进行比较，但不在查询中）

$user_id = $_POST['user_id']; //selected user from list

$query = "SELECT * from pages";
$result = mysql_query($query);
while($rowPage = mysql_fetch_assoc($result)) {

    $upid = $rowPage['user_id'];
    $pid = $rowPage['page_id'];
    $title = $rowPage['title'];

    if($upid == $user_id) {
        echo '<input type="checkbox" name="userPages[]" value="'.$pid.'" checked="checked"> '.$title;   
    } else {
        echo '<input type="checkbox" name="userPages[]" value="'.$pid.'"> '.$title;
    }
}

我的意思是在不刷新页面的情况下如何在 Ajax/Jquery 中实现。希望你明白我的意思。谢谢

【问题讨论】：

只需将 select 元素替换为您从 ajax 调用中检索到的元素即可？
感谢您的回复，但主要是我需要那个 ajax 代码，我不知道 ajax :(
err .. 然后开始阅读有关 ajax 实践的内容？最快和最简单的方法是使用 jQuery 之类的 javascript 库并使用许多 ajax 方法之一

标签： php ajax jquery checkbox

【解决方案1】：

这就是你能做的事情是这样的

 echo '<select name="user_id" id="userCombo">';
 echo '<option value="">Select User</option>';

 $sql = "SELECT * from users";
 $res = mysql_query($sql);
 while($row = mysql_fetch_assoc($res)) {
    $uid = $row['user_id'];
    $user = $row['user'];
    echo '<option value="'.$uid.'">'.$user.'</option>'; 
 }

echo '</select>';
echo '<div id="userCheckBoxes"></div>'

现在将 ajax 调用放在选择框的更改事件上。我这里打算用jquery ajax。

<script type="text/javascript">
 $(document).ready(function()
 {
   $("#userCombo").change(function()
   {
     var id=$(this).val();
     var dataString = 'user_id='+ id;
     $.ajax
     ({
         type: "POST",
         url: "ajax_checkboxes.php",
         data: dataString,
         cache: false,
         success: function(html)
         {
            $("#userCheckBoxes").html(html);
         }
     });
   });
 });
 </script>

现在将 ajax_checkboxes.php 放入同一目录。然后将下面的代码放入 ajax_checkboxes.php。我假设您可以自己建立数据库连接。

  $user_id = $_POST['user_id']; //selected user from list

  $query = "SELECT * from pages";
  $result = mysql_query($query);
  while($rowPage = mysql_fetch_assoc($result)) {

       $upid = $rowPage['user_id'];
       $pid = $rowPage['page_id'];
       $title = $rowPage['title'];

    if($upid == $user_id) {
        echo '<input type="checkbox" name="userPages[]" value="'.$pid.'"        checked="checked"> '.$title;   
     } else {
        echo '<input type="checkbox" name="userPages[]" value="'.$pid.'"> '.$title;
    }
 }

我没有在我的本地服务器上品尝过它，但我相信它会起作用。

PS 不要在你网站的头部包含 jQuery。

【讨论】：