根据另一个下拉列表删除列表

时间:2016-04-01 12:51:59

标签: php html select html-select

希望你很好,

我有一个包含类别列表的下拉列表,如下所示:

<div  class='form-group'>
    <br/>
        <label class='control-label col-md-2 'for='id_date'>Category</label>
            <div class='col-md-2' class='form-group' class='col-md-11'>
            <select class="form-control " id="sel1" ng-model="category" ng-init="" >
                        <?php
                        mysql_connect('localhost', 'root', '');

                        mysql_select_db('my');

                        $sql = "SELECT category FROM categories";

                        $result = mysql_query($sql);
                        while ($row = mysql_fetch_array($result)) {
                            echo "<option value='" . $row['category'] . "'>" . $row['category'] . "</option>";
                        } ?>
                        </select>
                        </div>
                    </div>

在这个选择之下,我有另一个选择,即从类别中选择元素,如下所示:

<div  class='form-group'>
   <br/>
        label class='control-label col-md-2 ' for='id_date'>element</label>
            <div class='col-md-2' class='form-group' class='col-md-11'>
            <select class="form-control"  id="sel12"   ng-model="elemnt" ng-init="" >
                        <?php
                        mysql_connect('localhost', 'root', '');

                        mysql_select_db('my');

                        $sql = "SELECT element FROM elements where category =   ";

                        $result = mysql_query($sql);
                        while ($row = mysql_fetch_array($result)) {
                            echo "<option value='" . $row['element'] . "'>" . $row['element'] . "</option>";
                        } ?>
                        </select>
                        </div>
                    </div>

我如何使第二个下拉列表的内容基于第一个下拉列表?例如,我如何将第一个下拉列表的输入放在第二个SQL语句中?

问候。

2 个答案:

答案 0 :(得分:1)

只有php才能做到这一点。

您必须使用javascript / Jquery和ajax。

创建一个从请求加载数据的PHP脚本。 更改后的第一个选择使用ajax函数,该函数使用正确的值调用您的php脚本并更新第二个选择。

<select class="form-control " id="sel1" ng-model="category" ng-init="" >
                        <?php
                    mysql_connect('localhost', 'root', '');

                    mysql_select_db('my');

                    $sql = "SELECT category FROM categories";

                    $result = mysql_query($sql);
                    while ($row = mysql_fetch_array($result)) {
                        echo "<option value='" . $row['category'] . "'>" . $row['category'] . "</option>";
                    } ?>
                    </select>

<强> Jquery的

$("#sel1").change(function(){
$.ajax({
  method: "POST",
  url: "yourscript.php",
  data: {myval : $(this).val()};
})
  .done(function( msg ) {
    //Here append your result in your second select
  });

});

<强> PHP

<?php 
if(isset($_POST['myval']))
{
  //SQL query where id=myval
  echo $result;//result of query
}

答案 1 :(得分:0)

使用纯PHP与中间提交:

//create a json to collect the sum of numbers
var number = {
  a1: 0,
  a2: 0,
  a1_count:0,
  a2_count:0
};
//check in select change 
$(".select").change(function() {

//flush previous calculation before using again 
   number.a1=0,number.a2=0,number.a1_count=0,number.a2_count=0;
   
//check all the select value and get the corresponding input value 
  $(".select").each(function() {
    var valueType = $(this).val();
    if (valueType == "a1") {
      number[valueType+"_count"]=number[valueType+"_count"]+1;  
      number[valueType] = number[valueType] + parseInt($(this).prev().val()||0);
    } else if (valueType == "a2") {
number[valueType+"_count"]=number[valueType+"_count"]+1;
      number[valueType] = number[valueType] + parseInt($(this).prev().val()||0);
    }

  });
  
  $("#total").html('Total:'+(number.a1+number.a2)+',A1:'+number.a1+'('+number.a1_count+'),A2:'+number.a1+'('+number.a2_count+')');
 
})

然而,这不是最佳或最有效的方法,该脚本仅阐述了如何在没有JS的情况下完成所需的工作。