如何根据上一个下拉框的值更新下拉框

时间:2015-01-21 17:18:01

标签: javascript php jquery html drop-down-menu

我目前是javascript的初学者,而且我很难通过下拉框的值。我只知道如何将值输入php,如果我将选择的东西包装到一个帖子表单中并创建一个按钮来获取它点击时的值,但因为这是javascript,所以没有提交按钮和我需要根据第一个下拉列表的值更新第二个下拉列表,并根据第一个和第二个值更新第三个下拉列表。

我的表格如下:

enter image description here

目前,我的代码所做的只是将值存储在下拉框中。我想要它做的是如果" guy"选择1月选择第1周,年份应仅包含2015年,当他选择第2周时,年份应仅包含2013年。

<?php

mysql_connect("localhost","root","") or die(mysql_error());
mysql_select_db("my_db") or die (mysql_error());

$queryMonth = mysql_query("SELECT DISTINCT month FROM list WHERE username='guy'");
$queryWeek = mysql_query("SELECT DISTINCT week FROM list WHERE username='guy', month='Should be the value of the first select'");
$queryYear = mysql_query("SELECT DISTINCT year FROM list WHERE username='guy', month='Should be the value of the first select', week='Should be the value of the second select'");

?>      

<html>
<head>
<script src="js/javascript.js"></script>
<script>
function getMonth() {
document.getElementById("monthchoice").value = document.getElementById("month").value;
}

function getWeek() {
document.getElementById("weekchoice").value = document.getElementById("week").value;
}

function getYear() {
document.getElementById("yearchoice").value = document.getElementById("year").value;
}
</script>
</head>
<body>

<select id="month" onchange="getMonth()" >
<option value="" disabled selected>Select your option</option>
<?php  
while($getMonth = mysql_fetch_assoc($queryMonth))
{
echo 
'
<option value="'.$getMonth['month'].'">'.$getMonth['month'].'</option>
';
}
?>
</select>

<select id="week" onchange="getWeek()" >
<option value="" disabled selected>Select your option</option>
<?php  
while($getWeek = mysql_fetch_assoc($queryWeek))
{
echo 
'
<option value="'.$getWeek['week'].'">'.$getWeek['week'].'</option>
';
}
?>
</select>

<select id="year" onchange="getYear()" >
<option value="" disabled selected>Select your option</option>
<?php  
while($getYear = mysql_fetch_assoc($queryYear))
{
echo 
'
<option value="'.$getYear['year'].'">'.$getYear['year'].'</option>
';
}
?>
</select>
<br><br>
<input type="text" id="monthchoice"><br>
<input type="text" id="weekchoice"><br>
<input type="text" id="yearchoice"><br>

</body>
</html>

1 个答案:

答案 0 :(得分:0)

你应该研究ajax。

http://www.w3schools.com/ajax/ajax_intro.asp

更改下拉框值的值时。您可以使用ajax从服务器请求新数据。如果需要,服务器应返回json数据类型或xml。然后,您将从服务器收到的数据解析为javascript对象。然后使用javascript将旧的 dropdownboxvalue 值替换为之前从服务器收到的新 dropdownboxvalue (我建议您使用jquery,因为它很安静,易于初学者使用)