关于select城市选择框的问题！为什么不显示_有问有答_Weblogic技术|Tuxedo技术|中间件技术|Oracle论坛|JAVA论坛|Linux/Unix技术|hadoop论坛

总帖数

每页帖数

1/2页

返回列表

发起投票

查看: 3279 | 回复: 15

主题： 关于select城市选择框的问题！为什么不显示

blackTrc

注册用户

等级：少校
经验：853
发帖：13
精华：0
注册：2015-4-28
状态：离线
发送短消息息给blackTrc

加好友发送短消息息给blackTrc

发消息

发表于：

2016-2-2 17:29:12 | [全部帖] [楼主帖]

楼主

代码如下：

<body>
<form>
    <select id="sheng">
        <option value="0">湖北省</option>
            <option value="1">广东省</option>
            <option value="2">湖南省</option>
            <option value="3">安徽省</option>
            <option value="4">河南省</option>
        </select>
        <select id="shi">
        <option value="">--请选择--</option>
        </select>
    </form>
    <script type="text/javascript">
var sheng=document.getElementById("sheng");
var shi=document.getElementById("shi");
var city=[];
city[0]=["武汉市","襄阳市","黄冈市","孝感市","仙桃市"];
city[1]=["广州市","东莞市","深圳市","珠海市","江门市"];
city[2]=["长沙市","常德市","衡阳市","郴州市","邵阳市"];
city[3]=["合肥市","蚌埠市","淮南市","淮北市","黄山市"];
city[4]=["郑州市","安阳市","邓州市","新乡市","驻马店市"];
sheng.onchange=function(){
for(var i=0;i<city[this.value];i++){
shi.add(new Option(city[this.value][i],city[this.value][i]));
}
}
</script>
</body>

以上代码为什么没有效果？this.value 确实是获得了value的属性，为什么shi.add(new Option(city[this.value][i],city[this.value][i]));这一段没气作用呢？
谢谢大神！

本版精华
热门帖子

操作引用/回复

westRing

注册用户

等级：少校
经验：1198
发帖：22
精华：0
注册：2015-4-9
状态：离线
发送短消息息给westRing

加好友发送短消息息给westRing

发消息

发表于：

2016-2-2 17:33:02 | [全部帖] [楼主帖]

2 楼

有个地方是不是写错了，在24行

for(var i=0;i<city[this.value].length;i++){

操作引用/回复

westRing

注册用户

等级：少校
经验：1198
发帖：22
精华：0
注册：2015-4-9
状态：离线
发送短消息息给westRing

加好友发送短消息息给westRing

发消息

发表于：

2016-2-2 17:35:12 | [全部帖] [楼主帖]

3 楼

还有，add方法可以这样用吗，表示怀疑

操作引用/回复

_chen

版主

等级：中校
经验：2139
发帖：39
精华：0
注册：2013-8-23
状态：离线
发送短消息息给_chen

加好友发送短消息息给_chen

发消息

发表于：

2016-2-2 17:46:39 | [全部帖] [楼主帖]

4 楼

试试如下代码：

<form>
	<select id="sheng">
		<option value="0">湖北省</option>
		<option value="1">广东省</option>
		<option value="2">湖南省</option>
		<option value="3">安徽省</option>
		<option value="4">河南省</option>
	</select>
	<select id="shi">
		<option value="">--请选择--</option>
	</select>
</form>
<script type="text/javascript">
var sheng=document.getElementById("sheng");
var shi=document.getElementById("shi");
var city=[];
city[0]=["武汉市","襄阳市","黄冈市","孝感市","仙桃市"];
city[1]=["广州市","东莞市","深圳市","珠海市","江门市"];
city[2]=["长沙市","常德市","衡阳市","郴州市","邵阳市"];
city[3]=["合肥市","蚌埠市","淮南市","淮北市","黄山市"];
city[4]=["郑州市","安阳市","邓州市","新乡市","驻马店市"];

sheng.onchange=function(){
	shi.innerHTML = "<option value=''>--请选择--</option>";
	for(var i=0;i<city[this.value].length;i++){
		shi.add(new Option(city[this.value][i],city[this.value][i]));
	}
}
</script>

操作引用/回复

hui.chen

注册用户

等级：大校
经验：6070
发帖：48
精华：4
注册：2014-2-7
状态：离线
发送短消息息给hui.chen

加好友发送短消息息给hui.chen

发消息

发表于：

2016-2-3 10:54:40 | [全部帖] [楼主帖]

5 楼

关于add方法的解释，W3C上是这样写的

add() 方法用于向 select 添加一个 option 元素

语法：

selectObject.add(option,before)

option：要添加选项元素，必需是 option 或 optgroup 元素

before：在选项数组的该元素之前增加新的元素，如果该参数是null，元素添加到选项数组的末尾

小例子：

var opt = document.createElement("option");
opt.text = opt.value = i;
obj.add(opt);

在IE下添加成功，火狐下不成功，需要写成

obj.options.add(opt);

该贴被hui.chen编辑于2016-2-3 11:57:00

u=2871144702,1362725177&fm=21&gp=0.jpg.gif

操作引用/回复

hui.chen

注册用户

等级：大校
经验：6070
发帖：48
精华：4
注册：2014-2-7
状态：离线
发送短消息息给hui.chen

加好友发送短消息息给hui.chen

发消息

发表于：

2016-2-3 16:34:49 | [全部帖] [楼主帖]

6 楼

有失误，抱歉，刚在火狐下测试了上述代码，shi.add(opt)的写法也是没有问题，我使用的是火狐44.0的版本

在IE11下，shi.options.add(opt);的写法也没有问题

该贴被hui.chen编辑于2016-2-3 16:40:17

u=2871144702,1362725177&fm=21&gp=0.jpg.gif

操作引用/回复

唾沫星子

注册用户

等级：下士
经验：176
发帖：1
精华：0
注册：2016-1-8
状态：离线
发送短消息息给唾沫星子

加好友发送短消息息给唾沫星子

发消息

发表于：

2016-2-3 16:51:00 | [全部帖] [楼主帖]

7 楼

额，我是路过哒

操作引用/回复

_chen

版主

等级：中校
经验：2139
发帖：39
精华：0
注册：2013-8-23
状态：离线
发送短消息息给_chen

加好友发送短消息息给_chen

发消息

发表于：

2016-2-6 14:19:11 | [全部帖] [楼主帖]

8 楼

引用6楼hui.chen的回复有失误，抱歉，刚在火狐下测试了上述代码，shi.add(opt)的写法也是没有问题，我使用的是火狐44.0的版本在IE11下，shi.options.add(opt);的写法也没有问题该贴被hui......

应该是浏览器升级了，现在的兼容性越来越好了

操作引用/回复

斗破苍穹

注册用户

等级：中尉
经验：442
发帖：3
精华：0
注册：2016-1-8
状态：离线
发送短消息息给斗破苍穹

加好友发送短消息息给斗破苍穹

发消息

发表于：

2016-2-15 15:21:32 | [全部帖] [楼主帖]

9 楼

非常棒，值得学习！

操作引用/回复

filogra

注册用户

等级：少校
经验：1408
发帖：13
精华：0
注册：2015-6-2
状态：离线
发送短消息息给filogra

加好友发送短消息息给filogra

发消息

发表于：

2016-4-25 9:13:19 | [全部帖] [楼主帖]

10 楼

操作引用/回复

总帖数

每页帖数

1/2页

返回列表

用户登录

Weblogic中间件技术论坛

Tuxedo中间件技术论坛

数据库论坛

Java论坛

Linux/unix论坛

网站地图