当前位置: 代码迷 >> Java Web开发 >> 当innerHTML遇上document.getElementById
  详细解决方案

当innerHTML遇上document.getElementById

热度:3130   发布时间:2013-02-25 21:19:19.0
当innerHTML遇上document.getElementById 在线等
简述一下我的需求:页面上有一个法院级别:下拉框:里面有高级,中级,低级。 又一个下拉框,显示顺序:里面是数字,是通过法院级别动态获取的,比如:你选择了中级,如果数据库里有中级5条数据,那么显示顺序下拉框里就应该有123456,6是默认的。
我用了js写了下拉框改变事件,不知道页面代码显示顺序该怎么写?
<select name="linkSort" id="linkSort" onchange="return(aaaaa())";/>
<option value="1" >高级法院链接</option>
<option value="2" >中级法院链接</option>
<option value="3" >基层法院链接</option>
</select>

function aaaaa()
{
var obj=document.getElementById("linkSort");
for(i=0;i<obj.length;i++) 
{
if(obj[i].selected==true) //下拉框的长度就是他的选项数
{
alert(obj[i].value);
if(obj[i].value==1)
{
document.getElementById("linkSort").innerHtml=document.getElementById("list1").innerHtml;
return;
}
if(obj[i].value==2)
{
document.getElementById("linkSort").innerHtml=document.getElementById("list2").innerHtml;
return;
}
if(obj[i].value==3)
{
document.getElementById("linkSort").innerHtml=document.getElementById("list3").innerHtml;
return;
}
  }
}


界面上:
<div class="link">
  <label for="LinkOrder">显示顺序:</label>
  <select name="linkOrder" id="linkOrder" style="width: 78px;">
<div id="list1" style="display: none;"><option> XXXX</option> </div>
<div id="list2" style="display: none;"><<option>XXXX </option> </div>
<div id="list3" style="display: none;"><option>XXXX </option> </div>
  </select>
</div>
应该是选中某个级别,就显示对应的div,我现在是div全部都显示出来了。请问我这样写哪里有问题?

------解决方案--------------------------------------------------------
1。<div>应该在<select>标签外层。而不是<option>外层。
2。<select>里面的<option>增删用以下js
html>
<head>
<script language="javascript">
function number(){
var obj = document.getElementById("mySelect");
//obj.options[obj.selectedIndex] = new Option("我的吃吃","4");//在当前选中的那个的值中改变
//obj.options.add(new Option("我的吃吃","4"));再添加一个option
//alert(obj.selectedIndex);//显示序号,option自己设置的
//obj.options[obj.selectedIndex].text = "我的吃吃";更改值
//obj.remove(obj.selectedIndex);删除功能
}
</script>
</head>
<body>
<select id="mySelect">
<option>我的包包</option>
<option>我的本本</option>
<option>我的油油</option>
<option>我的担子</option>
</select>
<input type="button" name="button" value="查看结果" onclick="number();">
</body>
</html>


1.动态创建select

function createSelect(){

var mySelect = document.createElement("select"); 
mySelect.id = "mySelect"; 
document.body.appendChild(mySelect);
}

2.添加选项option

function addOption(){

//根据id查找对象,
var obj=document.getElementById('mySelect');

//添加一个选项
obj.add(new Option("文本","值")); //这个只能在IE中有效
obj.options.add(new Option("text","value")); //这个兼容IE与firefox
}

3.删除所有选项option

function removeAll(){
  相关解决方案