基于previous选项选择动态更改选择框选项 [英] Dynamically change selectbox options based on previous option selection
问题描述
我试图完成如下... HTML
What I am trying to accomplish is the following... 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年，我想显示一月至十二月为上的第二个选项。如果用户选择，pdefined $ P $日期，我想显示当月，当月日期，并最近7天。 JavaScript的插件，我使用允许定义的onChange，的OnOpen和OnClose中的方法用户。我一直在做一些研究，看来，AJAX参与试图做到这一点，但因为我不知道PHP中的一位，我想知道是否有可能实现这一目标与jQuery。 （我曾试图解决这个问题，没有运气，当然，我不是在找人来为我做的，我只是想指出了正确的方向，我是否能做到这一点与jQuery，或者如果有必要使用AJAX，因为我还没有看到一个例子在线，只有jQuery的）。
This creates two select boxes, I want one box to display content according to what the user chooses on the other one. For example, if the user chooses, 2010 or 2011 or 2012, I want to display Jan-Dec as options on the second one. If the user chooses, Predefined Dates, I want to display Current Month, Month to Date, and Last 7 Days. The javascript plugin I'm using allows the user to define the onChange, onOpen, and onClose methods. I have been doing some research and it appears that AJAX is involved in trying to accomplish this, but since I don't know one bit of PHP I would like to know if it's possible to accomplish this with jQuery. (I have attempted to solve this problem with no luck of course, I am not looking for someone to do it for me, I just want to be pointed in the right direction, whether I can accomplish this with jQuery or if it's necessary to use AJAX since I haven't seen an example online with only jQuery).
任何帮助将AP preciated
Any help will be appreciated
推荐答案
希望对您的要求了以下工作。有3个孩子的下拉列表中（无申报单）1 - 选择 - ，2月 - 12月3，其他选项
I hope the following work for your requirement. Having 3 child dropdowns (no divs) 1. --Select--, 2. Jan-Dec 3.Other options
$().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();
}
});
}
更新：添加标记为上面的脚本
UPDATE: Adding markup for the above script
<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（值）的功能。家长选择的值传递给该功能时，网页已准备就绪（只是加载后），还当用户更改选择。父选定值可以是，1，2。接下来的foreach循环发现需要显示和其他隐藏在孩子的名字。如果用户选择---选择母公司---选项，那么该功能将显示dateselector_child_等两个隐藏。
Check the setChild(value) function. Parent's selected value is passing to that function when page is ready (just after loading) and also when user change the selection. Parent's selected value could be "","1","2". Next the foreach loop finds the name of the child that needs to show and others are hidden. if user select ---Select--- option of the parent then that function will show "dateselector_child_" and others two hidden.
希望很显然现在....
Hope it's clear now....
这篇关于基于previous选项选择动态更改选择框选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
