从下拉列表中进行多项选择

时间:2015-02-28 10:40:03

标签: php jquery html

嗨,我已经问了这个问题,但我现在简要地说了一下,请分享一些逻辑。 第一个下拉列表 - enter image description here 包含Class-1,class-2,class-3..etc。 第二个下拉列表 - enter image description here 取决于课程。如果我们选择了1级和2级,那么相应的学生ID将显示在第2个下拉列表中。 我希望在相应变量中选择的类和在相应变量中选择的涡轮机。 然后我将获得这些选定的变量并在另一页中使用。

我想在每个下拉列表中进行多项选择。 假设我选择了一个Class-1然后,在classId第二个下拉列表中将填入相应的studentID,我再次选择另一个class-2然后再次在第二个下拉列表中添加相应的studentID列表。

在我的数据库脚本ClassId和StudentId中,此属性仅出现在同一个表中(不是不同的表)。

表视图有点像这样 - >

 ClassID    StudentID   StudentNm 
      1        101         abc 
      1        102         xyz 
      1        103         jkl 
      2        201         uio
      2        202         tyu 
      3        302         qwe 
      3        305         zxc

2 个答案:

答案 0 :(得分:2)

试试这个样本

你的桌子应该像这样

   CREATE TABLE 'data'
   (
   'id' int primary key auto_increment,
    'data' varchar(50),
     'weight' int(2),
   );

  CREATE TABLE `data_parent` 
   (
  `pid` int(11) primary key auto_increment,
  `did` int(11) unique,
  `parent` int(11),
  Foreign key(did) references data(id)
  )



<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".country").change(function()
{
var id=$(this).val();
var dataString = 'id='+ id;

$.ajax
({
type: "POST",
url: "ajax_city.php",
data: dataString,
cache: false,
success: function(html)
{
$(".city").html(html);
} 
});

});

});
</script>
&#13;
Country :
<select name="country" class="country">
<option selected="selected">--Select Country--</option>
<?php
include('db.php');
$sql=mysql_query("select id,data from data where weight='1'");
while($row=mysql_fetch_array($sql))
{
$id=$row['id'];
$data=$row['data'];
echo '<option value="'.$id.'">'.$data.'</option>';
} ?>
</select> <br/><br/>

City :
<select name="city" class="city">
<option selected="selected">--Select City--</option>
</select>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

试试这个

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<select multiple="multiple" name="classId" class="select-box">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
</select>

 <script src="https://code.jquery.com/jquery-2.1.3.js"></script>
 <script>
    $('.select-box').change(function(){
        var classId = $(this).val();

        $.ajax({
            url : 'getSub.php',
            type: 'POST',
            dataType : 'JSON',
            data : {
                'classId' : classId,
            },
            success : function(data){
                console.log(data);
            }

        });
    });
 </script>
</body>
</html>

当您打印selectedValues时,将以数组格式打印值。在getSub.php中,您可以获取值并将其作为json发送

getSub.php

<?php

$classIds = implode(',', $_POST['classId']);

$stmet = "SELECT StudentID from TBL where ClassID IN ('$classIds')";

$query = mysql_query($stmet);

$result = mysql_fetch_array($query);

echo json_encode($result);
?>