当innerHTML遇上document.getElementById
日期：2014-05-17 浏览次数：20786 次
当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"
简述一下我的需求：页面上有一个法院级别：下拉框：里面有高级，中级，低级。 又一个下拉框，显示顺序：里面是数字，是通过法院级别动态获取的，比如：你选择了中级，如果数据库里有中级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"
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
