js select innerHTML问题

chan10 2010-06-29 12:16:06
jsp的，select 控件中，用innerHTML来显示下拉数据，总是有问题。
如：
jsp中.


<select id="test">

</select>

js中.


var obj_td =  document.getElementById("test");

var data = '<option value=2>222</option>'

obj_td.innerHTML = data;

alert(obj_td.innerHTML);


最后，
obj_td.innerHTML
弹出的框中，显示的是222</option>,
test中，也就显示不出来。

1.该如何处理？

2.反而用innerText可以弹出<option value=2>222</option>的框，
但是显示不出来内容到下拉框中。

PS:
data有可能是一串，如


<option value='-1'>-请选择-</option><option value='10'>指定专营店</option><option value='21'>销售点</option><option value='64'>沟通代理</option>

所以，单独一个个的解析出来用option来搞，有些麻烦（dwr用java代码来查询的数据），不想用这种方法。
...全文
888 17 打赏 收藏 转发到动态 举报
写回复
用AI写文章
17 条回复
切换为时间正序
请发表友善的回复…
发表回复
chan10 2010-07-01
  • 打赏
  • 举报
 回复
明白了，是select里不能直接用innerHTML。
只能用select的parentNode来讲select再重新包一次。
这个BUG确实。。。
chan10 2010-06-30
  • 打赏
  • 举报
 回复
[Quote=引用 9 楼 yuyue618 的回复:]
HTML code

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>主页面</title>
<script src="jquery.js"></script>
<script type="text/javascript">
$(function()……
[/Quote]
除了用LS的jquery方法，最基本的js不能处理吗？
monexus 2010-06-30
  • 打赏
  • 举报
 回复
不能用innerHTML修改已在的select
<select id="test"></select>

<script>

var modSelectInnerHTML = (function (){

    var temp = document.createElement('a');

    return function (select, html){

        select.options.length = 0;

        temp.innerHTML= '<select>' + html + '</select>';

        var options = temp.getElementsByTagName('option');

        while (options[0] && select.appendChild(options[0]));

    };

})();



var select = document.getElementById('test');

var options = '<option value="-1">-请选择-</option><option value="10">指定专营店</option><option value="21">销售点</option><option value="64">沟通代理</option>';



modSelectInnerHTML(select, options);

</script>
Headsen 2010-06-30
  • 打赏
  • 举报
 回复
高度相似的问题啊，我以为我回答过啊！从一楼拖到最后没看见我。

InnerHTML这东西最好少用了，支持的浏览器少兼容差啊

还有什么比使用动态DOM修改HTML的DOM树结构。！！！只要最正宗。

3楼是最主流的做法。其他的直接忽略！
碧海情天-赵亮 2010-06-30
  • 打赏
  • 举报
 回复
刚刚看了下，原来后面那个所谓完美解决方案，不过还是借用了微软所建议的替换方法而已，没创意。
碧海情天-赵亮 2010-06-30
  • 打赏
  • 举报
 回复
这是微软承认的IE的BUG，详见 http://support.microsoft.com/kb/276228
同时里面有建议更换的方式。

而下面的文章里，据说是完美解决的方案，我没时间试验，楼主有兴趣自己试一下
http://www.zhanz5.com/a/javascriptjiaocheng/2010/0515/13391.html
luojihaidao 2010-06-30
  • 打赏
  • 举报
 回复
var obj_td = document.getElementById("test");
var data = '<option value=2>222</option>'
obj_td.innerHTML = data;
alert(obj_td.innerHTML);

不能这么用，要用innerHTMl即　obj_td.parentNode.innerHTML = "<select id='test'><option value='-1'>　像写的sd5816690

要么用var obj_td = document.getElementById("test");
obj_td.options[0]=new Option("222","2");　　像shan1119写的。

建议用第一种。
hoojo 2010-06-30
  • 打赏
  • 举报
 回复
[Quote=引用 10 楼 chan10 的回复:]
引用 9 楼 yuyue618 的回复:
HTML code

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>主页面</title>
<script src="jquery.js"></script>
<script type="text/java……
[/Quote]
不能！暂时还没有发现解决方案
chan10 2010-06-29
  • 打赏
  • 举报
 回复
麻烦你们回帖时，看下诶。
passself 2010-06-29
  • 打赏
  • 举报
 回复
像楼上一样使用key-value
chan10 2010-06-29
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 shan1119 的回复:]
JScript code
var obj_td = document.getElementById("test");
obj_td.options[0]=new Option("222","2");

alert(obj_td.innerHTML);
[/Quote]

我在问题中已经说了啊。

[Quote=引用 1 楼 chan10 的帖子 注意事项:]

PS:
data有可能是一串，如
JScript code
<option value='-1'>-请选择-</option><option value='10'>指定专营店</option><option value='21'>销售点</option><option value='64'>沟通代理</option>

所以，单独一个个的解析出来用option来搞，有些麻烦（dwr用java代码来查询的数据），不想用这种方法。

[/Quote]




shan1119 2010-06-29
  • 打赏
  • 举报
 回复 
var obj_td =  document.getElementById("test");

obj_td.options[0]=new Option("222","2");



alert(obj_td.innerHTML);
chan10 2010-06-29
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 sd5816690 的回复:]
如果父容器只有 select 一个元素，就下面这样，加上<select></select>

obj_td.parentNode.innerHTML = "<select id='test'><option value='-1'>-请选择-</option><option value='10'>指定专营店</option><option value='21'>销售点</option><opti……
[/Quote]
1.不能再select对象中，直接用innerHTML吗？
2.如果父类中有其他对象，不就挂了嘛。
sd5816690 2010-06-29
  • 打赏
  • 举报
 回复
如果父容器只有 select 一个元素，就下面这样，加上<select></select>

obj_td.parentNode.innerHTML = "<select id='test'><option value='-1'>-请选择-</option><option value='10'>指定专营店</option><option value='21'>销售点</option><option value='64'>沟通代理</option></select>"
yuyue618 2010-06-29
  • 打赏
  • 举报
 回复 


<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>主页面</title>

<script src="jquery.js"></script>

<script type="text/javascript">

$(function(){

	var opt = "<option value='-1'>-请选择-</option><option value='10'>指定专营店</option>";

	$("#sel").html(opt);	

});

</script>

</head>



<body>

<form>

<select id="sel"></select>

</form>

</body>

</html>
chan10 2010-06-29
  • 打赏
  • 举报
 回复
[Quote=引用 7 楼 ibm_hoojo 的回复:]
引用 1 楼 sd5816690 的回复:
如果父容器只有 select 一个元素，就下面这样，加上<select></select>

obj_td.parentNode.innerHTML = "<select id='test'><option value='-1'>-请选择-</option><option value='10'>指定专营店</option><option value……
[/Quote]
这个事情，js还直接控制不了？
hoojo 2010-06-29
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 sd5816690 的回复:]
如果父容器只有 select 一个元素，就下面这样，加上<select></select>

obj_td.parentNode.innerHTML = "<select id='test'><option value='-1'>-请选择-</option><option value='10'>指定专营店</option><option value='21'>销售点</option><opti……
[/Quote]
不过你可以采用new Option
如果要innerHTML的话，可以用jquery
JS多选下拉框_实现多项选择
JS多选下拉框，实现多选。点击显示下拉。 <script type="text/javascript"> <!-- function $(e){return document.getElementById(e) ;} $('btnSelect').onclick = function () { //§ó§ï?? $('status')....
js在IE与firefox的差异集锦
1.firefox不能对innerText支持。...在IE中一般用js：obj.onselectstart=function(){return false;} 而firefox用CSS:-moz-user-select:none 3.滤镜的支持(例：透明滤镜)： IE:filter：alpha(opacity=10); fire
fd-listen:FP风格的事件处理
fd-listen 处理FP风格的DOM事件 安装 npm install fd-listen --save 用法 var listen = require ( 'fd-listen' ) ;... innerHTML = 'clicked' ; } ) ; onClickSetClicked ( select ( '.link' ) ) ;
JS中用innerHTML生成<select>的问题
[code="...] ... c.innerHTML=""; c.innerHTML+=""+'aaaa'; c.innerHTML+=""+'bbbb'; c.innerHTML+=""+'cccc'; c.innerHTML+="&qu
js关于修改innerHtml改变其字元素内存地址的问题
js关于修改添加dom改变其他元素内存地址的问题 最近做一个数独，实现其中一个功能时发现一个问题，对一个元素的innerHtml追加后之前存储在对象中的dom元素地址找不到了，然后自然是报错… 在调试中发现问题，但是并...
JavaScript

87,907

社区成员

224,615

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章