当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全部都显示出来了。请问我这样写哪里有问题？
[解决办法]
１。<div>应该在<select>标签外层。而不是<option>外层。
２。<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(){
var obj=document.getElementById('mySelect');
obj.options.length=0;
}
4.删除一个选项option
function removeOne(){
var obj=document.getElementById('mySelect');
//index,要删除选项的序号，这里取当前选中选项的序号
var index=obj.selectedIndex;
obj.options.remove(index);
}
5.获得选项option的值
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号，取当前选中选项的序号
var val = obj.options[index].value;
6.获得选项option的文本
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号，取当前选中选项的序号
var val = obj.options[index].text;
7.修改选项option
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序号，取当前选中选项的序号
var val = obj.options[index]=new Option("新文本","新值");
8.删除select
function removeSelect(){
var mySelect = document.getElementById("mySelect");
mySelect.parentNode.removeChild(mySelect);
}
[解决办法]
你思路乱了 赋值就错了吧 应该是改变div的style吧
[解决办法]
你让他显示在哪里呢 是显示在<select name="linkSort" id="linkSort" onchange="return(aaaaa())";/>
<option value="1" >高级法院链接</option>
<option value="2" >中级法院链接</option>
<option value="3" >基层法院链接</option>
</select>
里面啊？
[解决办法]
这也太假了吧 。有项目还有这样的需求？
[解决办法]
给select赋值方式
var optionObj=new Option('1','XXX');
var sel=document.getElementById('XXXXXX');
sel.options.add(optionObj);
[解决办法]
1、div放的位置肯定不行
2、
document.getElementById"linkSort").innerHtml=document.getElementById"list1").innerHtml;
你这句是干什么的？用第二个select的选项是覆盖第一个select?
[解决办法]
这个你就可以直接控制一下div的style就行了吧。不用document.getElementById("linkSort").innerHtml=document.getElementById("list1").innerHtml;
了吧直接得到那个你要用的div 设置他的style 为block就行了吧
[解决办法]
其实用AJAX做不是更简单？
