Javascript 实现无刷新联动菜单(select)的方法
2012-09-20 16:10
941 查看
目录(?)[+]
所谓联动菜单,就是后一个下拉框的选项是根据前一个下拉框被选中的值来决定的,一个典型的应用就是省市联动菜单了,市的下拉选项是根据你选了哪个省来决定的,类似的需求我们经常遇到,相信许多新手都被这个问题困扰过。
其实,联动菜单的实现原理非常简单,本文详细介绍了联动菜单的实现方式,知道了原理,我们可以很容易地制作从XML、数据库加载的无限级联动菜单。
--------------------------------------------------------------
点此浏览示例文件
--------------------------------------------------------------
Code:
var newOption = new Option(optionText, optionvalue);
根据上面的语法,我们知道 select 选项分 optionText 和 optionvalue 两个内容,optionText 即下拉框中我们看到的选项,而 optionvalue 则是提交的实际值。比如一个选项我们看到的是 “北京”,而实际提交的值是 “010”。
为了保持一致,我们确定选项的格式为:
Code:
{txt:"选项名", val:"选项值"}
那么一个选项组则是:
Code:
var childArr = [];
childArr['父选项值1'] = [
{txt:"选项名1", val:"选项值1"},
{txt:"选项名2", val:"选项值2"},
{txt:"选项名3", val:"选项值3"},
...
{txt:"选项名n", val:"选项值n"}
]
childArr['父选项值2'] = [
{txt:"选项名1", val:"选项值1"},
{txt:"选项名2", val:"选项值2"},
{txt:"选项名3", val:"选项值3"},
...
{txt:"选项名n", val:"选项值n"}
]
其中“父选项值”是父下拉列表选中的值。
注意:[ ] 和 {} 中的值是以“,” (逗号)分隔的,但是最后一个值后面不能有 “,” (逗号),否则语法错误, PHP 程序员要特别注意 !!!
for (var i=0; i < len; i++)
{
selectObj.options[i] = new Option(optionList[i].txt, optionList[i].val);
}
function removeOptions(selectObj)
{
if (typeof selectObj != 'object')
{
selectObj = document.getElementById(selectObj);
}
// 原有选项计数
var len = selectObj.options.length;
for (var i=0; i < len; i++)
{
// 移除当前选项
selectObj.options[0] = null;
}
}
注意,这里不是用 selectObj.options[i] 而是用的 selectObj.options[0] ,由于在 options[0] 删除后,后面的选项就会补上,因此,我们只需要 selectObj.options[0] = null 。
另外,下拉列表也需要能够设置默认选择项,即在页面加载的时候,设置选中状态的项目。
完整代码如下:
Javascript:
[javascript]
view plaincopy
<ol><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><script language=<span class="st0">"JavaScript"</span> type=<span class="st0">"text/javascript"</span>> </div></li><li class="li1"><div class="de1"><!-- </div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"><span class="coMULTI">/* </span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * 说明:将指定下拉列表的选项值清空 </span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * 作者:CodeBit.cn ( http://www.CodeBit.cn ) </span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * </span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * @param {String || Object]} selectObj 目标下拉选框的名称或对象,必须 </span></div></li><li class="li2"><div class="de2"><span class="coMULTI"> */</span> </div></li><li class="li1"><div class="de1"><span class="kw2">function</span> removeOptions<span class="br0">(</span>selectObj<span class="br0">)</span> </div></li><li class="li1"><div class="de1"><span class="br0">{</span> </div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span><span class="kw1">typeof</span> selectObj != <span class="st0">'object'</span><span class="br0">)</span> </div></li><li class="li1"><div class="de1"> <span class="br0">{</span> </div></li><li class="li2"><div class="de2"> selectObj = document.<span class="me1">getElementById</span><span class="br0">(</span>selectObj<span class="br0">)</span>; </div></li><li class="li1"><div class="de1"> <span class="br0">}</span> </div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// 原有选项计数 </span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> len = selectObj.<span class="me1">options</span>.<span class="me1">length</span>; </div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="kw1">for</span> <span class="br0">(</span><span class="kw2">var</span> i=<span class="nu0">0</span>; i < len; i++<span class="br0">)</span> </div></li><li class="li1"><div class="de1"> <span class="br0">{</span> </div></li><li class="li1"><div class="de1"> <span class="co1">// 移除当前选项 </span></div></li><li class="li1"><div class="de1"> selectObj.<span class="me1">options</span><span class="br0">[</span><span class="nu0">0</span><span class="br0">]</span> = <span class="kw2">null</span>; </div></li><li class="li2"><div class="de2"> <span class="br0">}</span> </div></li><li class="li1"><div class="de1"><span class="br0">}</span> </div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="coMULTI">/* </span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * 说明:设置传入的选项值到指定的下拉列表中 </span></div></li><li class="li2"><div class="de2"><span class="coMULTI"> * 作者:CodeBit.cn ( http://www.CodeBit.cn ) </span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * </span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * @param {String || Object]} selectObj 目标下拉选框的名称或对象,必须 </span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * @param {Array} optionList 选项值设置 格式:[{txt:'北京', val:'010'}, {txt:'上海', val:'020'}] ,必须 </span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * @param {String} firstOption 第一个选项值,如:“请选择”,可选,值为空 </span></div></li><li class="li2"><div class="de2"><span class="coMULTI"> * @param {String} selected 默认选中值,可选 </span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> */</span> </div></li><li class="li1"><div class="de1"><span class="kw2">function</span> setSelectOption<span class="br0">(</span>selectObj, optionList, firstOption, selected<span class="br0">)</span> </div></li><li class="li1"><div class="de1"><span class="br0">{</span> </div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span><span class="kw1">typeof</span> selectObj != <span class="st0">'object'</span><span class="br0">)</span> </div></li><li class="li2"><div class="de2"> <span class="br0">{</span> </div></li><li class="li1"><div class="de1"> selectObj = document.<span class="me1">getElementById</span><span class="br0">(</span>selectObj<span class="br0">)</span>; </div></li><li class="li1"><div class="de1"> <span class="br0">}</span> </div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// 清空选项 </span></div></li><li class="li2"><div class="de2"> removeOptions<span class="br0">(</span>selectObj<span class="br0">)</span>; </div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// 选项计数 </span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> start = <span class="nu0">0</span>; </div></li><li class="li1"> </li><li class="li2"><div class="de2"> <span class="co1">// 如果需要添加第一个选项 </span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>firstOption<span class="br0">)</span> </div></li><li class="li1"><div class="de1"> <span class="br0">{</span> </div></li><li class="li1"><div class="de1"> selectObj.<span class="me1">options</span><span class="br0">[</span><span class="nu0">0</span><span class="br0">]</span> = <span class="kw2">new</span> Option<span class="br0">(</span>firstOption, <span class="st0">''</span><span class="br0">)</span>; </div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="co1">// 选项计数从 1 开始 </span></div></li><li class="li1"><div class="de1"> start ++; </div></li><li class="li1"><div class="de1"> <span class="br0">}</span> </div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> len = optionList.<span class="me1">length</span>; </div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="kw1">for</span> <span class="br0">(</span><span class="kw2">var</span> i=<span class="nu0">0</span>; i < len; i++<span class="br0">)</span> </div></li><li class="li1"><div class="de1"> <span class="br0">{</span> </div></li><li class="li1"><div class="de1"> <span class="co1">// 设置 option </span></div></li><li class="li1"><div class="de1"> selectObj.<span class="me1">options</span><span class="br0">[</span>start<span class="br0">]</span> = <span class="kw2">new</span> Option<span class="br0">(</span>optionList<span class="br0">[</span>i<span class="br0">]</span>.<span class="me1">txt</span>, optionList<span class="br0">[</span>i<span class="br0">]</span>.<span class="me1">val</span><span class="br0">)</span>; </div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="co1">// 选中项 </span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span><span class="br0">(</span>selected == optionList<span class="br0">[</span>i<span class="br0">]</span>.<span class="me1">val</span><span class="br0">)</span> </div></li><li class="li1"><div class="de1"> <span class="br0">{</span> </div></li><li class="li1"><div class="de1"> selectObj.<span class="me1">options</span><span class="br0">[</span>start<span class="br0">]</span>.<span class="me1">selected</span> = <span class="kw2">true</span>; </div></li><li class="li2"><div class="de2"> <span class="br0">}</span> </div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// 计数加 1 </span></div></li><li class="li1"><div class="de1"> start ++; </div></li><li class="li1"><div class="de1"> <span class="br0">}</span> </div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"><span class="br0">}</span> </div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="co1">//--> </span></div></li><li class="li1"><div class="de1"></script> </div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> </div></li></ol>
示例代码:
HTML:
所谓联动菜单,就是后一个下拉框的选项是根据前一个下拉框被选中的值来决定的,一个典型的应用就是省市联动菜单了,市的下拉选项是根据你选了哪个省来决定的,类似的需求我们经常遇到,相信许多新手都被这个问题困扰过。
其实,联动菜单的实现原理非常简单,本文详细介绍了联动菜单的实现方式,知道了原理,我们可以很容易地制作从XML、数据库加载的无限级联动菜单。
--------------------------------------------------------------
点此浏览示例文件
--------------------------------------------------------------
联动菜单的实现方法:
1.确定数据格式:
首先,我们介绍一下创建 Option 的语法:Code:
var newOption = new Option(optionText, optionvalue);
根据上面的语法,我们知道 select 选项分 optionText 和 optionvalue 两个内容,optionText 即下拉框中我们看到的选项,而 optionvalue 则是提交的实际值。比如一个选项我们看到的是 “北京”,而实际提交的值是 “010”。
为了保持一致,我们确定选项的格式为:
Code:
{txt:"选项名", val:"选项值"}
那么一个选项组则是:
Code:
var childArr = [];
childArr['父选项值1'] = [
{txt:"选项名1", val:"选项值1"},
{txt:"选项名2", val:"选项值2"},
{txt:"选项名3", val:"选项值3"},
...
{txt:"选项名n", val:"选项值n"}
]
childArr['父选项值2'] = [
{txt:"选项名1", val:"选项值1"},
{txt:"选项名2", val:"选项值2"},
{txt:"选项名3", val:"选项值3"},
...
{txt:"选项名n", val:"选项值n"}
]
其中“父选项值”是父下拉列表选中的值。
注意:[ ] 和 {} 中的值是以“,” (逗号)分隔的,但是最后一个值后面不能有 “,” (逗号),否则语法错误, PHP 程序员要特别注意 !!!
2.根据传入的数组创建选项列表:
Code:for (var i=0; i < len; i++)
{
selectObj.options[i] = new Option(optionList[i].txt, optionList[i].val);
}
3.在设置选项之前,我们需要先将原有选项清空:
Code:function removeOptions(selectObj)
{
if (typeof selectObj != 'object')
{
selectObj = document.getElementById(selectObj);
}
// 原有选项计数
var len = selectObj.options.length;
for (var i=0; i < len; i++)
{
// 移除当前选项
selectObj.options[0] = null;
}
}
注意,这里不是用 selectObj.options[i] 而是用的 selectObj.options[0] ,由于在 options[0] 删除后,后面的选项就会补上,因此,我们只需要 selectObj.options[0] = null 。
4.设置一个提示选择项和默认选择项:
通常我们在下拉列表中会设置一个提示选择项,如:“请选择城市”,这个选项值为空,作用只是提示用户执行选择操作。另外,下拉列表也需要能够设置默认选择项,即在页面加载的时候,设置选中状态的项目。
完整代码如下:
Javascript:
[javascript]
view plaincopy
<ol><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><script language=<span class="st0">"JavaScript"</span> type=<span class="st0">"text/javascript"</span>> </div></li><li class="li1"><div class="de1"><!-- </div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"><span class="coMULTI">/* </span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * 说明:将指定下拉列表的选项值清空 </span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * 作者:CodeBit.cn ( http://www.CodeBit.cn ) </span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * </span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * @param {String || Object]} selectObj 目标下拉选框的名称或对象,必须 </span></div></li><li class="li2"><div class="de2"><span class="coMULTI"> */</span> </div></li><li class="li1"><div class="de1"><span class="kw2">function</span> removeOptions<span class="br0">(</span>selectObj<span class="br0">)</span> </div></li><li class="li1"><div class="de1"><span class="br0">{</span> </div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span><span class="kw1">typeof</span> selectObj != <span class="st0">'object'</span><span class="br0">)</span> </div></li><li class="li1"><div class="de1"> <span class="br0">{</span> </div></li><li class="li2"><div class="de2"> selectObj = document.<span class="me1">getElementById</span><span class="br0">(</span>selectObj<span class="br0">)</span>; </div></li><li class="li1"><div class="de1"> <span class="br0">}</span> </div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// 原有选项计数 </span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> len = selectObj.<span class="me1">options</span>.<span class="me1">length</span>; </div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="kw1">for</span> <span class="br0">(</span><span class="kw2">var</span> i=<span class="nu0">0</span>; i < len; i++<span class="br0">)</span> </div></li><li class="li1"><div class="de1"> <span class="br0">{</span> </div></li><li class="li1"><div class="de1"> <span class="co1">// 移除当前选项 </span></div></li><li class="li1"><div class="de1"> selectObj.<span class="me1">options</span><span class="br0">[</span><span class="nu0">0</span><span class="br0">]</span> = <span class="kw2">null</span>; </div></li><li class="li2"><div class="de2"> <span class="br0">}</span> </div></li><li class="li1"><div class="de1"><span class="br0">}</span> </div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="coMULTI">/* </span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * 说明:设置传入的选项值到指定的下拉列表中 </span></div></li><li class="li2"><div class="de2"><span class="coMULTI"> * 作者:CodeBit.cn ( http://www.CodeBit.cn ) </span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * </span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * @param {String || Object]} selectObj 目标下拉选框的名称或对象,必须 </span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * @param {Array} optionList 选项值设置 格式:[{txt:'北京', val:'010'}, {txt:'上海', val:'020'}] ,必须 </span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * @param {String} firstOption 第一个选项值,如:“请选择”,可选,值为空 </span></div></li><li class="li2"><div class="de2"><span class="coMULTI"> * @param {String} selected 默认选中值,可选 </span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> */</span> </div></li><li class="li1"><div class="de1"><span class="kw2">function</span> setSelectOption<span class="br0">(</span>selectObj, optionList, firstOption, selected<span class="br0">)</span> </div></li><li class="li1"><div class="de1"><span class="br0">{</span> </div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span><span class="kw1">typeof</span> selectObj != <span class="st0">'object'</span><span class="br0">)</span> </div></li><li class="li2"><div class="de2"> <span class="br0">{</span> </div></li><li class="li1"><div class="de1"> selectObj = document.<span class="me1">getElementById</span><span class="br0">(</span>selectObj<span class="br0">)</span>; </div></li><li class="li1"><div class="de1"> <span class="br0">}</span> </div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// 清空选项 </span></div></li><li class="li2"><div class="de2"> removeOptions<span class="br0">(</span>selectObj<span class="br0">)</span>; </div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// 选项计数 </span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> start = <span class="nu0">0</span>; </div></li><li class="li1"> </li><li class="li2"><div class="de2"> <span class="co1">// 如果需要添加第一个选项 </span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>firstOption<span class="br0">)</span> </div></li><li class="li1"><div class="de1"> <span class="br0">{</span> </div></li><li class="li1"><div class="de1"> selectObj.<span class="me1">options</span><span class="br0">[</span><span class="nu0">0</span><span class="br0">]</span> = <span class="kw2">new</span> Option<span class="br0">(</span>firstOption, <span class="st0">''</span><span class="br0">)</span>; </div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="co1">// 选项计数从 1 开始 </span></div></li><li class="li1"><div class="de1"> start ++; </div></li><li class="li1"><div class="de1"> <span class="br0">}</span> </div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> len = optionList.<span class="me1">length</span>; </div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="kw1">for</span> <span class="br0">(</span><span class="kw2">var</span> i=<span class="nu0">0</span>; i < len; i++<span class="br0">)</span> </div></li><li class="li1"><div class="de1"> <span class="br0">{</span> </div></li><li class="li1"><div class="de1"> <span class="co1">// 设置 option </span></div></li><li class="li1"><div class="de1"> selectObj.<span class="me1">options</span><span class="br0">[</span>start<span class="br0">]</span> = <span class="kw2">new</span> Option<span class="br0">(</span>optionList<span class="br0">[</span>i<span class="br0">]</span>.<span class="me1">txt</span>, optionList<span class="br0">[</span>i<span class="br0">]</span>.<span class="me1">val</span><span class="br0">)</span>; </div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="co1">// 选中项 </span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span><span class="br0">(</span>selected == optionList<span class="br0">[</span>i<span class="br0">]</span>.<span class="me1">val</span><span class="br0">)</span> </div></li><li class="li1"><div class="de1"> <span class="br0">{</span> </div></li><li class="li1"><div class="de1"> selectObj.<span class="me1">options</span><span class="br0">[</span>start<span class="br0">]</span>.<span class="me1">selected</span> = <span class="kw2">true</span>; </div></li><li class="li2"><div class="de2"> <span class="br0">}</span> </div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// 计数加 1 </span></div></li><li class="li1"><div class="de1"> start ++; </div></li><li class="li1"><div class="de1"> <span class="br0">}</span> </div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"><span class="br0">}</span> </div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="co1">//--> </span></div></li><li class="li1"><div class="de1"></script> </div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> </div></li></ol>
示例代码:
HTML:
<script language="JavaScript" type="text/javascript"> var cityArr = []; cityArr['江苏省'] = [ {txt:'南京', val:'南京'}, {txt:'无锡', val:'无锡'}, {txt:'徐州', val:'徐州'}, {txt:'苏州', val:'苏州'}, {txt:'南通', val:'南通'}, {txt:'淮阴', val:'淮阴'}, {txt:'扬州', val:'扬州'}, {txt:'镇江', val:'镇江'}, {txt:'常州', val:'常州'} ]; cityArr['浙江省'] = [ {txt:'杭州', val:'杭州'}, {txt:'宁波', val:'宁波'}, {txt:'温州', val:'温州'}, {txt:'湖州', val:'湖州'} ]; function setCity(province) { setSelectOption('city', cityArr[province], '-请选择-'); } </script> <select name="province" id="province" onchange="if(this.value != '') setCity(this.options[this.selectedIndex].value);"> <option value="">-请选择-</option> <option value="江苏省">江苏省</option> <option value="浙江省">浙江省</option> </select> 省 <select name="city" id="city"> <option value="">-请选择-</option> </select> 市
相关文章推荐
- Javascript 实现无刷新联动菜单(select)的方法
- Javascript 实现无刷新联动菜单(select)的方法
- Javascript 实现无刷新联动菜单(select)的方法
- Javascript 实现无刷新联动菜单(select)的方法
- Javascript 实现无刷新联动菜单(select)的方法
- 使用动态JavaScript实现多级菜单联动时不刷新页面的方法
- JS实现无刷新联动菜单(select)的方法
- JS实现无刷新联动菜单(select)的方法
- JS实现无刷新联动菜单(select)的方法
- 两级联动select刷新后其值保持不变的实现方法
- ASP.NET利用JavaScript实现无刷新闪烁二级联动菜单
- ASP.NET利用JavaScript实现无刷新闪烁二级联动菜单
- javascript实现无限级select联动菜单
- ASP.NET利用JavaScript实现无刷新闪烁二级联动菜单
- javascript 无刷新select联动菜单
- javascript实现无限级select联动菜单
- ASP.NET利用JavaScript实现无刷新闪烁二级联动菜单
- JavaScript实现DropDownList(Select)三级联动无刷新 (http://blog.csdn.net/itfly8/archive/2007/07/05/1679102.aspx)
- ASP.NET利用JavaScript实现无刷新闪烁二级联动菜单
- PHP&JavaScript二级联动菜单的实现方法