onchange动态下拉值使用PHP [英] onchange dynamic dropdown values using php

查看：77 发布时间：2018/6/19 16:10:16 javascript php jquery html ajax

本文介绍了onchange动态下拉值使用PHP的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已经编写了两个下拉框的代码。第一个下拉列表包含主类别动态值的列表。当我选择主要类别列表中的任何一个值时，第二个下拉列表应显示相应的子类别值。我怎样才能做到这一点？
这里是我的代码：

 < div class =row> 
< div class =col-xs-6 col-sm-6 col-md-4 col-md-offset-1> 
< div class =form-group> 
请选择您的类别
< / div> 
< / div> 
< div class =col-xs-6 col-sm-6 col-md-4 col-md-offset-1> 
< div class =form-group> 
 < option value =selected>请选择< / option> 
< option value =鸟类>鸟类< / option> 
< option value =动物>动物< / option> 
< option value =Notinlist>类别不在列表中< / option> 
< / select> 
< / div> 
< / div> 
< / div> 
 
< div class =row> 
< div class =col-xs-6 col-sm-6 col-md-4 col-md-offset-1> 
< div class =form-group> 
请选择您的子类别
< / div> 
< / div> 
< div class =col-xs-6 col-sm-6 col-md-4 col-md-offset-1> 
< div class =form-group> 
< select class =form-controlname =album_nameid =album_name> 
< option value =>请选择< / option> 
< / select> 
< / div> 
< / div> 
< / div>

添加ajax函数：

 < script> 
函数mainInfo（str）
 {
 var n; 
 if（str ==0）
 {
 document.getElementById（album_name）。innerHTML =< option>  - 选择 - < / option>; 
 return; 
 
 if（window.XMLHttpRequest）
 {
 n = new XMLHttpRequest（）; 
} 
 else 
 {
 n = new ActiveXObject（Microsoft.XMLHTTP）; 
 
 n.onreadystatechange = function（）
 {
 if（n.readyState == 4&& n.status == 200）
 {
 document.getElementById（album_name）。innerHTML = n.responseText; 
} 
} 
 
 n.open（GET，sub_category.php& category_name =+ str，true）; 
 n.send（）; 
} 
< / script>

在php页面上，它是 sub_category.php

 <？php 
 $ album_category = $ _POST ['category_name']; 
 $ sql = $ conn-> prepare（select * from`albums` where album_category = album_category）; 
 $ sql-> bindParam（：album_category，$ album_category）; 
 $ sql-> execute（）;？> 
< option value =>  - 选择状态 - < / option> 
 <？php 
 while（$ row = $ sql-> fetch（PDO :: FETCH_ASSOC））
 {
？> 
< option value =<？php echo $ row ['album_sub_category'];？>><？php echo $ row ['album_sub_category'];？>< / option> 
<？php 
} 
？>

I have written a code for two dropdown boxes. The first dropdown contains a list of main category dynamic values. when i select any one of the value in main category list the second dropdown should appear with corresponding sub category values. How can i do this? Here is my code:

            <div class="row">
                            <div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">
                                <div class="form-group">
                        Please Choose Your Category
                                </div>
                            </div>
                            <div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">
                                <div class="form-group">
                                         <select class="form-control" name="category_name" onchange="mainInfo(this.value);">
                                            <option value="" selected>Please Select</option>
                                            <option value="Birds">Birds</option>
                                                <option value="Animals">Animals</option>
                                            <option value="Notinlist">Category Not in list</option>
                                         </select>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">
                                <div class="form-group">
                        Please Choose Your Sub Category
                                </div>
                            </div>
                            <div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">
                                <div class="form-group">
                                         <select class="form-control" name="album_name">
                                            <option value="" selected>Please Select</option>
                                            <option value="Birds">Sub Birds</option>
                                                <option value="Animals">Sub Animals</option>
                                            <option value="Notinlist">Category Not in list</option>
                                         </select>
                                </div>
                            </div>


                        </div>

php code to fetch sub category for main category

 <?php 
 $album_category = $_POST['category_name'];
 $sql=$conn->prepare("select * from `albums` where album_category=:album_category");
 $sql->bindParam(":album_category",$album_category);
 $sql->execute();
 while ($row = $sql->fetch(PDO::FETCH_ASSOC))
  {
  echo $row['album_sub_category'];

} ?>

解决方案

Change your code to something like that :

 <div class="row">
    <div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">
       <div class="form-group">
       Please Choose Your Category
       </div>
    </div>
  <div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">
    <div class="form-group">
       <select class="form-control" name="category_name" id="category_name" onchange="mainInfo(this.value);">
            <option value="" selected>Please Select</option>
            <option value="Birds">Birds</option>
            <option value="Animals">Animals</option>
            <option value="Notinlist">Category Not in list</option>
         </select>
     </div>
   </div>
 </div>

 <div class="row">
    <div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">
      <div class="form-group">
         Please Choose Your Sub Category
      </div>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">
      <div class="form-group">
         <select class="form-control" name="album_name" id="album_name">
            <option value="">Please Select</option>
          </select>
       </div>
     </div>
   </div>

Add this ajax function :

<script>
function mainInfo(str)
{
    var n;
    if (str=="0")
    {
        document.getElementById("album_name").innerHTML="<option>--Select --</option>";
        return;
    }
    if (window.XMLHttpRequest)
    {
        n=new XMLHttpRequest();
    }
    else
    {
        n=new ActiveXObject("Microsoft.XMLHTTP");
    }
    n.onreadystatechange=function()
    {
    if (n.readyState==4 && n.status==200)
    {
        document.getElementById("album_name").innerHTML=n.responseText;
    }
    }

    n.open("GET","sub_category.php&category_name="+str,true);
    n.send();
}
</script>

And on the php page which is sub_category.php

<?php 
 $album_category = $_POST['category_name'];
 $sql=$conn->prepare("select * from `albums` where album_category=album_category");
 $sql->bindParam(":album_category",$album_category);
 $sql->execute();?>
<option value="">--Select State--</option>
<?php
 while ($row = $sql->fetch(PDO::FETCH_ASSOC))
  {
    ?>
    <option value="<?php echo $row['album_sub_category'];?>"><?php echo  $row['album_sub_category'];?></option>
   <?php
  }
?>

这篇关于onchange动态下拉值使用PHP的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

onchange动态下拉值使用PHP [英] onchange dynamic dropdown values using php

问题描述

相关文章

PHP最新文章

热门教程

热门工具

登录关闭

onchange动态下拉值使用PHP [英] onchange dynamic dropdown values using php

问题描述

相关文章

PHP最新文章

热门教程

热门工具

登录 关闭

登录关闭