简体   繁体   English

从下拉列表中选择选项,取决于两个下拉列表,这将显示mysql数据库php的主题选项

[英]Select option from dropdown list depending on two dropdown list which will show subject options from mysql database php

Database Screen Shot 数据库屏幕截图

Stream

1)CSE 1)CSE

2)ECE 2)ECE

Semester 学期

1)1 1)1

2)3 2)3

3)5 3)5

Subject 学科

1)DBMS 1)数据库管理系统

2)OS 2)作业系统

3)DCLD 3)DCLD

4)SS 4)SS

The above three fields are in the database.What i want is when I will select CSE from Stream dropdown box and 3 from Semester dropdown box, DBMS need to be selected from Subject dropdown box and so on. 以上三个字段都在数据库中。我想要的是当我从Stream下拉框中选择CSE ,从Semester下拉框中选择3时 ,需要从Subject下拉框中选择DBMS ,依此类推。

I have already configured the option selection for two dropdown boxes namely Stream and Subject means when i select option from Stream ,corresponding value has selected from Semester Dropdown 我已经配置了两个下拉框的选项选择,即主题意味着当我从流中选择选项时,从学期下拉菜单中选择了相应的值

The below code runs well.Please help me out by select Subject dropdown from Stream and Semester dropdown 下面的代码运行良好,请从StreamSemester下拉菜单中选择Subject下拉菜单来帮助我

The code is below: 代码如下:

select.php select.php

<html>
<head>
<link rel="stylesheet" type="text/css" href="select_style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function fetch_select(val)
{
$.ajax({
type: 'post',
url: 'fetch_data.php',
data: {
get_option:val
},
success: function (response) {
document.getElementById("new_select").innerHTML=response; 
}
});
}

</script>

</head>
<body>
<p id="heading">Select Subject for Timesheet</p>
<center>
<div id="select_box">
<select onChange="fetch_select(this.value);">
<option>Select Stream</option>
<?php
$host = 'localhost';
$user = 'xx';
$pass = 'zzz';
mysql_connect($host, $user, $pass);
mysql_select_db('sample');

$select=mysql_query("select stream from streamSub group by stream");
while($row=mysql_fetch_array($select))
{
echo "<option>".$row['stream']."</option>";
}

?>
</select>

<select id="new_select">
</select>
</div>     
</center>
</body>
</html>

fetch_data.php fetch_data.php

<?php
if(isset($_POST['get_option']))
{
$host = 'localhost';
$user = 'XX';
$pass = 'ZZZ';
mysql_connect($host, $user, $pass);
mysql_select_db('sample');

$stream = $_POST['get_option'];
$find=mysql_query("select subject from streamSub where  stream='$stream'");
while($row=mysql_fetch_array($find))
{
echo "<option>".$row['subject']."</option>";
}

exit;
}
?>

Main.php Main.php

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fetch Data Using Ajax</title>
<style type='text/css'>
  .hide{
    display: none;
  }
  .show{
    display: block;
  }
</style>
</head>
<body>
<form>
  <div>
    <label>
      Stream
    </label>
    <select id="stream">
      <option value="">Select Stream</option>
      <option value="CSE">CSE</option>
      <option value="ECE">ECE</option>
    </select>
  </div>
  <div>
    <label>
      Semester
    </label>
    <select id="sem">
      <option value="">Select Semester</option>
      <option value="1">1</option>
      <option value="2">3</option>
      <option value="3">5</option>
    </select>
  </div>
  <div id="subjectDiv" class="hide">
     <label>
      Subject
    </label>
    <select id='subject'>

    </select>
  </div>
</form>
 </body>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$('#sem').change(function(){
  $.ajax({
    url:'getData.php',
    type:'POST',
    data:{
      stream : $('#stream').val(),
      sem : $('#sem').val()
    },
    success:function(result){
      console.log(result);
        $('#subject').html(result);
        $('#subjectDiv').removeClass('hide');
        $('#subjectDiv').addClass('show');
    }
  });
});
});

getData.php getData.php

<?php

$con = mysqli_connect('localhost','root','','test');

$query = "SELECT * FROM getdata WHERE stream = '".$_POST['stream']."' AND sem = ".$_POST['sem'];

$row = mysqli_query($con,$query);

echo "<option value=''>Select Subject</option>";
while($data = mysqli_fetch_assoc($row)){
  echo "<option value='".$data['subject']."'>".$data['subject']."</option>";
}
?>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 根据下拉列表中的选定选项显示数据库中的数据 - Show data from database depending on selected option in a dropdown list 根据选择下拉列表中的单击选项更改标记 - Change a marker depending on the clicked option from a select dropdown list 使用下拉列表PHP / MySQL / HTML从数据库中检索数据 - Retrieving data from database with dropdown list PHP/MySQL/HTML jQuery-根据下拉列表中的选项更改复选框值 - Jquery - changing checkbox value depending on option from Dropdown list 在下拉列表中显示mysql表中的数据 - Show data from mysql table in dropdown list JavaScript:根据另一个下拉列表从下拉列表中删除不同的选项标签? - Javascript: Remove different option-tags from a dropdown list depending on another dropdown? 无法从量角器的ui列表下拉列表中选择选项值或文本 - Unable to select options value or text from ui list dropdown in protractor 如何禁用已从下拉列表中选择的选项? - How to disable an option which is already selected from dropdown list? 从下拉列表中选择选项时,Javascript显示隐藏的div - Javascript to show hidden div when option is selected from dropdown list 如何在表中该行的其他可用下拉列表中显示从下拉列表中取消选择的选项-jQuery - how to show the deselected option from the dropdown list in the other available dropdown list of that row in a table - jquery
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM