2017-10-11 74 views
0

我正在与被互相连接2个选择列表,所以我要的是一个接口的选择值:改变在PHP

如果用户选择在类别下拉框的第二选择列表中的选项将显示该类别中的所有选项。

<hmtl> 
<label>Section</label> 
<select class="form-control selcls" name="txtsection" id="txtsection" >                     
<?php 
while ($rows = mysqli_fetch_array($queryResultsec)) { ?> 
<option value="<?php echo $rows['Gradelvl_ID'];?>"><?php echo 
$rows['Section_Name'];?></option> 
<?php } 
      ?>    
    </select> 


<label>Section</label> 
<select class="form-control selcls" name="txtsection" id="txtsection" > 
<?php 
while ($rows = mysqli_fetch_array($queryResultsec)) {?> 
<option value="<?php echo $rows['Gradelvl_ID'];?>"><?php echo 
$rows['Section_Name'];?></option> <?php } 
      ?>    
    </select>  
</hmtl> 
+0

提供的代码你试过@Jeremy克鲁兹 –

+0

你可以使用AJAX它。 – javidrathod

+0

你是否使用数据库所以显示你的代码来帮助 –

回答

0

我花了一些根据您的问题写一些代码。在写这篇文章的时候,我假设你在存储类别和选项的两个表格之间有关系。我假定关系使用“Gradelvl_ID”。我还假设你在JavaScript,JQueryAJAX有一些知识。

因此,基于我创建了下面的代码。

这将是您的选择区域。

<hmtl> 
    <head> 
     <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
    </head> 
    <body> 
     <label>Section</label> 
     <select class="form-control selcls" name="txtsection" id="cat" > 
      <?php 
       while ($rows = mysqli_fetch_array($queryResultsec)) { ?> 
        <option id="<?php echo $rows['Gradelvl_ID'];?>"><?php echo $rows['Section_Name'];?></option> 
      <?php } ?> 
     </select> 
    <label>Section</label> 
     <select class="form-control selcls" name="txtsection" id="options" ></select> 
    </body>  
</html> 

此脚本使用jQuery,因此您需要将jQuery库链接到上面的页面。你也可以在第一页使用<script></script>标签或者作为.js文件拼写这个脚本。

$(document).ready(function(){ 
    $(document).on('change', '#cat', function(){ 
     $.ajax({ 
      url: 'getOptions.php', 
      type: 'get', 
      data: { 
       catId: $(this).prop('id') 
      } 
     }).then(function (response) { 
      $('#options').html(response); 
     }); 
    }); 
}) 

上面的代码将选定的ID发送到getOptions.php其中将包含PHP根据从您选择表发送ID号选择的所有选项。然后,如果选择成功,它将发回数据,这些数据将被上述AJAX代码捕获,并在第二个下拉列表中绘制选项。

<?php 
include_once('dbconnect.php'); 

//I'm not a big mysqli user 
if(!empty($_GET["id"])){ 
    $results = $conn -> prepare("SELECT * FROM <your table name> WHERE id = ?"); 
    $results -> bind_param('i', $_GET["id"]); 
    $results -> execute(); 
    $rowNum = $results -> num_rows; 

    if ($rowNum > 0){ 
     while($optRows = $results -> fetch_assoc()){ ?> 
      <option id="<?php echo $rows['Gradelvl_ID'];?>"><?php echo $rows['Section_Name'];?></option> 
     <?php 
     } 
    } 
}?> 

另外要注意上面的代码我使用预处理语句非常好习惯中来关注一下吧here

正如我说我是假设的代码的某些部分,并使用您和我提供的信息希望您能做更多的研究并使上述代码适合您。

如果这个工程,我想请你给我投票了,并标记这个答案作为问题选择的答案。

+0

我可以询问执行查询的部分吗?我怎么知道“?”的含义它应该是你得到的价值“$ _GET('id') –

+0

哦,查询中的'?'是一个占位符,它的值由'bind_param('i',$ _GET [”id“ ]''bind_param'中的'i'是数据类型,如果它是一个字符,那么''''读取关于他准备好的语句的数据类型,你也应该习惯使用预先准备好的语句,因为它更安全 – Sand

+0

我认为你在部分“var catid =;”部分有错误假设是它的值 –

0

试试这个代码:

$("#select1").change(function() { 
 
    if ($(this).data('options') === undefined) { 
 
    /*Taking an array of all options-2 and kind of embedding it on the select1*/ 
 
    $(this).data('options', $('#select2 option').clone()); 
 
    } 
 
    var id = $(this).val(); 
 
    var options = $(this).data('options').filter('[value=' + id + ']'); 
 
    $('#select2').html(options); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<select name="select1" id="select1"> 
 
     <option value="1">Fruit</option> 
 
     <option value="2">Animal</option> 
 
     <option value="3">Bird</option> 
 
     <option value="4">Car</option> 
 
    </select> 
 

 

 
<select name="select2" id="select2"> 
 
     <option value="1">Banana</option> 
 
     <option value="1">Apple</option> 
 
     <option value="1">Orange</option> 
 
     <option value="2">Wolf</option> 
 
     <option value="2">Fox</option> 
 
     <option value="2">Bear</option> 
 
     <option value="3">Eagle</option> 
 
     <option value="3">Hawk</option> 
 
     <option value="4">BWM<option> 
 
    </select>

+0

我已经尝试过这段代码,我认为这只适用于静态数据,我需要的是根据我的数据库动态更改 –

+0

您需要调用ajax并获取Json数据作为响应,并设置第二个选择下拉列表的HTML。 – javidrathod

+0

你必须在这里分享你的代码,所以我可以提供更好的解决方案 – javidrathod

0

做一件事 1,保持你的第二个下拉空。 2 - 调用jquery ajax获取第一个下拉值的变化 创建一个新的页面,其中只有db连接被处理后,sql处理相对于第一个下拉选择值的sql 3 - 获取对ajax方法的响应并获取输出