我想要完成的是以下……
HTML
<!doctype html>
<head>
<Meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link href="css/jquery.selectBox.css" type="text/css" rel="stylesheet" />
</head>
<body>
<select name="dateselector_parent" id="dateselector_parent" tabindex="1">
<option value="">--Select Date--</option>
<option value="1">2012</option>
<option value="1">2011</option>
<option value="1">2010</option>
<option value="2">Predefined Dates</option>
</select>
<select name="dateselector_child" id="dateselector_child" tabindex="2">
<option value="">--Select Date--</option>
<option value="1">January</option>
<option value="1">February</option>
<option value="1">march</option>
<option value="1">April</option>
<option value="1">May</option>
<option value="1">June</option>
<option value="1">July</option>
<option value="1">August</option>
<option value="1">September</option>
<option value="1">October</option>
<option value="1">November</option>
<option value="1">December</option>
<option value="2">Current Month</option>
<option value="2">Month to Date</option>
<option value="2">Last 7 Days</option>
</select>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.selectBox-0.2.js"></script>
<script type="text/javascript" src="js/datejs.js"></script>
<script type="text/javascript">
$(function () {
$("#dateselector_parent").selectBox();
$("#dateselector_child").selectBox();
});
</script>
</body>
这会创建两个选择框,我想要一个框根据用户在另一个框中选择的内容来显示内容.例如,如果用户选择2010或2011或2012,我想在第二个上显示Jan-Dec作为选项.如果用户选择预定义日期,我想显示当前月,月到日和过去7天.我正在使用的javascript插件允许用户定义onChange,onopen和onClose方法.我一直在做一些研究,似乎AJAX参与了尝试实现这一点,但由于我不知道一点PHP我想知道是否有可能用jQuery实现这一点. (我试图解决这个问题,当然没有运气,我不是在寻找有人为我做这件事,我只是想指出正确的方向,我是否能用jQuery完成这个或者是否有必要使用它AJAX,因为我还没有在网上看到只有jQuery的例子).
任何帮助将不胜感激
解决方法:
我希望以下工作符合您的要求.有3个孩子下拉菜单(没有div)1. – 选择 – ,2.1月 – 12月3日.其他选项
$().ready(function () {
var selectedOnLoad = $('#dateselector_parent').val();
setChild(selectedOnLoad);
$('#dateselector_parent').change(function () {
var selectedValue = $('#dateselector_parent').val();
setChild(selectedValue);
});
});
function setChild(value){
//Have your three child selector names as follows in your markup as well and assuming they are not in divs
var arr = [ "dateselector_child_", "dateselector_child_1", "dateselector_child_2"];
jQuery.each(arr, function() {
if(this == "dateselector_child_" + value){
$("#" + this).show();
}else{
$("#" + this).hide();
}
});
}
<select name="dateselector_parent" id="dateselector_parent" tabindex="1">
<option value="">--Select Date--</option>
<option value="1">2012</option>
<option value="1">2011</option>
<option value="1">2010</option>
<option value="2">Predefined Dates</option>
</select>
<select name="dateselector_child_" id="dateselector_child_" tabindex="2">
<option value="">--Select Date--</option>
</select>
<select name="dateselector_child_1" id="dateselector_child_1" tabindex="2">
<option value="">--Select Date--</option>
<option value="1">January</option>
<option value="1">February</option>
<option value="1">march</option>
<option value="1">April</option>
<option value="1">May</option>
<option value="1">June</option>
<option value="1">July</option>
<option value="1">August</option>
<option value="1">September</option>
<option value="1">October</option>
<option value="1">November</option>
<option value="1">December</option>
</select>
<select name="dateselector_child_2" id="dateselector_child_2" tabindex="2">
<option value="">--Select Date--</option>
<option value="2">Current Month</option>
<option value="2">Month to Date</option>
<option value="2">Last 7 Days</option>
</select>
检查setChild(value)函数.父页面的选定值在页面准备就绪时(加载后)以及用户更改选择时传递给该函数.父选择的值可以是“”,“1”,“2”.接下来,foreach循环查找需要显示的子项的名称,并隐藏其他项目的名称.如果用户选择—选择—父选项,则该功能将显示“dateselector_child_”,其他两个隐藏.
希望现在很清楚….