最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
javascript 无刷新select联动菜单
时间:2011-12-03 编辑:简简单单 来源:一聚教程网
联动菜单的实现方法:
1.确定数据格式:
首先,我们介绍一下创建 Option 的语法:
var newOption = new Option(optionText, optionvalue);
根据上面的语法,我们知道 select 选项分 optionText 和 optionvalue 两个内容,optionText 即下拉框中我们看到的选项,而 optionvalue 则是提交的实际值。比如一个选项我们看到的是 “北京”,而实际提交的值是 “010”。
为了保持一致,我们确定选项的格式为:
代码如下 | 复制代码 |
{txt:"选项名", val:"选项值"} var childArr = []; childArr['父选项值1'] = [ childArr['父选项值2'] = [ |
其中“父选项值”是父下拉列表选中的值。
注意:[ ] 和 {} 中的值是以“,” (逗号)分隔的,但是最后一个值后面不能有 “,” (逗号),否则语法错误, PHP 程序员要特别注意 !!!
2.根据传入的数组创建选项列表:
代码如下 | 复制代码 |
for (var i=0; i < len; i++) // 原有选项计数 for (var i=0; i < len; i++) |
注意,这里不是用 selectObj.options[i] 而是用的 selectObj.options[0] ,由于在 options[0] 删除后,后面的选项就会补上,因此,我们只需要 selectObj.options[0] = null 。
4.设置一个提示选择项和默认选择项:
通常我们在下拉列表中会设置一个提示选择项,如:“请选择城市”,这个选项值为空,作用只是提示用户执行选择操作。
另外,下拉列表也需要能够设置默认选择项,即在页面加载的时候,设置选中状态的项目
实例
代码如下 | 复制代码 |
name="province" id="province" onchange="if(this.value != '') setCity(this.options[this.selectedIndex].value);">
value="">-请选择-
value="江苏省">江苏省
value="浙江省">浙江省 省
name="city" id="city">
value="">-请选择- 市 |
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31