如何在下拉列表中添加复选框?

时间:2013-10-06 18:15:48

标签: php forms

我正在尝试在下拉列表中添加复选框,但我不知道如何实现此目的。下面是我用来定义复选框的代码:

<html> 
    <head> 
        <title>Scrolling Checkboxes</title> 
        <script type="text/javascript"> 
        </script> 
    </head> 
    <body> 
        <div id="ScrollCB" style="height:150;width:200px;overflow:auto"> 
            <input type="checkbox" id="scb1" name="scb1" value="1">0-1 Hours<br> 
            <input type="checkbox" id="scb2" name="scb2" value="2">1-2 Hours<br> 
            <input type="checkbox" id="scb3" name="scb3" value="3">2-3 Hours<br> 
            <input type="checkbox" id="scb4" name="scb4" value="4">3-4 Hours<br> 
            <input type="checkbox" id="scb5" name="scb5" value="5">4-5 Hours<br> 
            <input type="checkbox" id="scb6" name="scb6" value="6">5-6 Hours<br> 
            <input type="checkbox" id="scb7" name="scb7" value="7">6-7 Hours<br> 
            <input type="checkbox" id="scb8" name="scb8" value="8">7-8 Hours<br> 
            <input type="checkbox" id="scb9" name="scb9" value="9">8-9 Hours<br> 
        </div> 
    </body> 
</html> 

下面是我定义下拉列表的代码 - :

<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>
        <?php 
            function  select_time($time_)
            { ?>
        <select id="ftime" name="selecteddate_t<?php echo $time_ ;?>">
            <?php for($t=0;$t<=23;$t++) { ?>
            <option value=" <?php echo $t;   ?>"><?php echo $t; ?></option>
            <?php } ?>
        </select>
        <?php } 
        ?>
        <form action="xyz.php" method="post">
            <?php echo "Time: "select_time('from');?>
        </form>
    </body>
</html>

我希望当任何一个单击下拉列表时,将显示一个复选框列表,他/她可以选择多个复选框。另外,请解释如何在变量中获取所有选定的值。我们正在尝试为用户提供选择多个时段的选项,根据选择,我们将向他/她显示所需的统计数据。我不知道我需要什么是安静可行的。我已经尝试了很多将复选框与下拉列表集成,但是我没有达到预期的结果。

1 个答案:

答案 0 :(得分:0)

Below is the code which works for me please have a look on this.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Dropdown Check List</title>
<link rel="stylesheet" type="text/css" href="ui.dropdownchecklist.css" />
<link rel="stylesheet" type="text/css" href="demo.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript" src="ui.dropdownchecklist.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
       $("#s4").dropdownchecklist({ maxDropHeight: 120 });
      });
</script>
</head>
<body>
<?php
  echo "<br>";
  function submit_button() { ?>
  <input name="submit" type="submit">
 <?php } 
 ?>
 <?php
 function multiple_chk($selectedbox) { ?>
 <select id="selectedbox" name="selectedbox<?php echo $year; ?>">
 <?php for($k=1;$k<=3;$k++) {?>
 <option  value="<?php echo '201'.$k; ?> "><?php echo '201'.$k; ?></option>
 <?php }  ?>
 </select>
 <?php } 
 ?>
 <div id="content">
 <p>
 <select id="s4" name="multiple[]" multiple="multiple" size="4" >
        <option name="ASSA">0-1 Hours</option>
        <option value="DSSD">1-2 Hours</option>
        <option value="2">2-3 Hours</option>
        <option>3-4 Hours</option>
        <option>4-5 Hours</option>
        <option>5-6 Hours</option>
        <option>6-7 Hours</option>
        <option>7-8 Hours</option>
        <option>8-9 Hours</option>
        <option>9-10 Hours</option>
        <option>10-11 Hours</option>
        <option>11-12 Hours</option>
        <option>12-13 Hours</option>
        <option>13-14 Hours</option>
        <option>14-15 Hours</option>
        <option>15-16 Hours</option>
        <option>16-17 Hours</option>
        <option>17-18 Hours</option>
        <option>18-19 Hours</option>
        <option>19-20 Hours</option>
        <option>20-21 Hours</option>
        <option>21-22 Hours</option>
        <option>22-23 Hours</option>
        <option>23-24 Hours</option>

    </select>
    <?php submit_button(); ?></form>

</p>

<?php
echo '<pre>';print_r($_REQUEST);echo '</pre>';   
?>
</div>
</body>
</html>