`
llm6101
  • 浏览: 21542 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JS中用innerHTML生成<select>的问题

CC++C#HTMLSUN 
阅读更多 
<html>
<head>
<script type="text/javascript">
function a(){
	var c = document.getElementById("t1");
	c.innerHTML="<select id='callInfoTitleID' name='callInfoTitleID' "
		+"multiple size='5' style='height:100px;width:100px;' >";
	c.innerHTML+="<option value='1'>"+'aaaa';
	c.innerHTML+="<option value='1'>"+'bbbb';
	c.innerHTML+="<option value='1'>"+'cccc';
	c.innerHTML+="</select>";
}
</script>
</head>
<body >
	<div id='t1'>
	
	</div>
<input type="button" value="OK" onclick="a()">
</body>
</html>


下拉列表没有选项,选项跑下拉列表列表外面去了.....

后来琢磨了琢磨 这样:拼字符串,拼好后再放到innerHTML里 
<html>
<head>
<script type="text/javascript">
function a(){
	var c = document.getElementById("t1");
	c.innerHTML="<select id='callInfoTitleID' name='callInfoTitleID' "
		+"multiple size='5' style='height:100px;width:100px;' >";
	c.innerHTML+="<option value='1'>"+'aaaa';
	c.innerHTML+="<option value='1'>"+'bbbb';
	c.innerHTML+="<option value='1'>"+'cccc';
	c.innerHTML+="</select>";
}
function b(){
	var c = document.getElementById("t2");
	var str = "" ;
	str+="<select id='callInfoTitleID' name='callInfoTitleID' "
		+"multiple size='5' style='height:100px;width:100px;' >";
	
	str+="<option value='1'>"+'aaaa';
	str+="<option value='1'>"+'bbbb';
	str+="<option value='1'>"+'cccc';
	str+="</select>";
	c.innerHTML = str ;
}
</script>
</head>
<body >
	<div id='t1'>
	
	</div>
	<div id='t2'>
	
	</div>
<input type="button" value="A" onclick="a()"><br><br><br>
<input type="button" value="B" onclick="b()">
</body>
</html>


这样问题就解决了 嘿嘿~~~ 晕啊
  • 描述: 出现了这种问题,下拉列表没有选项,选项跑下拉列表列表外面去了.....
  • 大小: 12.9 KB
分享到：
| PrepareStatement中的sql语句中的in查询问 ...
评论
4 楼 llm6101 2008-07-02  
achun 写道

为什么要写那么多 innerHTML+=...呢？明显错误呀！ 

function a(){
	var c = document.getElementById("t1");
	c.innerHTML=""
		+"aaaa"
		+"bbbb"
		+"cccc"
		+"";
}



你的这个和我function b()一样了啊
对于function a(),如果innerHTML不+=的话,那最后只能有一个元素了,即</select>
3 楼 achun 2008-07-01  
<p>为什么要写那么多 innerHTML+=...呢？明显错误呀！</p>
<pre name='code' class='js'>function a(){
var c = document.getElementById("t1");
c.innerHTML="&lt;select id='callInfoTitleID' name='callInfoTitleID' "
+"multiple size='5' style='height:100px;width:100px;' &gt;"
+"&lt;option value='1'&gt;aaaa&lt;/option&gt;"
+"&lt;option value='1'&gt;bbbb&lt;/option&gt;"
+"&lt;option value='1'&gt;cccc&lt;/option&gt;"
+"&lt;/select&gt;";
}</pre>
 
2 楼 llm6101 2008-07-01  
achun 写道
标签没有结束呀！
<option value='1'>aaa</option>
这可是基本知识呀！ 


<%@ page contentType="text/html; charset=GB2312" isErrorPage="true"%>
<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %>
<html>
<head>
<script type="text/javascript">
function a(){
	var c = document.getElementById("t1");
	c.innerHTML="<select id='callInfoTitleID' name='callInfoTitleID' "
		+"multiple size='5' style='height:100px;width:100px;' >";
	c.innerHTML+="<option value='1'>"+'aaaa'+"</option>";
	c.innerHTML+="<option value='1'>"+'bbbb'+"</option>";
	c.innerHTML+="<option value='1'>"+'cccc'+"</option>";
	c.innerHTML+="</select>";
}
function b(){
	var c = document.getElementById("t2");
	var str = "" ;
	str+="<select id='callInfoTitleID' name='callInfoTitleID' "
		+"multiple size='5' style='height:100px;width:100px;' >";
	
	str+="<option value='1'>"+'aaaa';
	str+="<option value='1'>"+'bbbb';
	str+="<option value='1'>"+'cccc';
	str+="</select>";
	c.innerHTML = str ;
}
</script>
</head>
<body >
	<div id='t1'>
	
	</div>
	<div id='t2'>
	
	</div>
<input type="button" value="A" onclick="a()"><br><br><br>
<input type="button" value="B" onclick="b()">
</body>
</html>


但是我加上了也不好使啊,而function b()里没有结束标记也好用呢
1 楼 achun 2008-07-01  
标签没有结束呀！
<option value='1'>aaa</option>
这可是基本知识呀！
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    向元素中动态添加option

    这篇博客“向&lt;select&gt;元素中动态添加option”探讨的就是如何在JavaScript或jQuery的帮助下，实现在用户界面中动态地向`&lt;select&gt;`元素添加选项。 JavaScript是一种广泛使用的客户端脚本语言，它可以操作HTML元素，...

    使用js实现 年月日绑定html 控件上

    2. **动态生成选项：** 利用JavaScript动态生成这些`&lt;select&gt;`元素中的选项，包括年份、月份和日期。 3. **事件监听：** 为每个`&lt;select&gt;`元素添加事件监听器，以便在用户选择时更新其他两个`&lt;select&gt;`元素的选项。 ...

    联动组件JAVA<select>代码

    服务器响应后，客户端使用JavaScript解析返回的JSON数据，并更新第二个&lt;select&gt;的选项。例如： ```javascript var options = JSON.parse(response); var select2 = document.getElementById('select2'); // ...

    html 表单排序

    x.innerHTML.toLowerCase() &gt; y.innerHTML.toLowerCase() : x.innerHTML.toLowerCase() &lt; y.innerHTML.toLowerCase()) { shouldSwitch = true; break; } } if (shouldSwitch) { rows[i].parentNode....

    select将选中的option设置为默认选项

    在网页开发中，`&lt;select&gt;`元素用于创建下拉列表，而`&lt;option&gt;`标签则定义了下拉列表中的选项。有时候，我们可能需要在页面加载时预设一个选项为默认选中状态，或者根据用户操作动态改变选中状态。在JavaScript中，这...

    【前端】<div>的排版练习【HTML+CSS+JavaScript(JS)】

    在这个【前端】&lt;div&gt;的排版练习中，我们将深入探讨如何利用HTML、CSS以及JavaScript（JS）来实现复杂的网页布局。 首先，HTML（HyperText Markup Language）是构建网页内容的基础语言。`&lt;div&gt;`标签是HTML中的一种...

    三级下拉列表 select 网页 html5

    在HTML5中，这种复杂的下拉列表通常结合`&lt;select&gt;`标签、JavaScript（JS）以及可能的CSS来实现。下面将详细介绍如何构建一个三级联动的下拉列表。 首先，我们要理解HTML5的`&lt;select&gt;`标签。`&lt;select&gt;`标签用于创建...

    上标下标的实现

    &lt;p&gt;氢气的分子式为H&lt;sub&gt;2&lt;/sub&gt;&lt;/p&gt; &lt;p&gt;平方根是x&lt;sup&gt;2&lt;/sup&gt;&lt;/p&gt; ``` 在CSS中，可以通过设置`vertical-align`属性来实现类似效果，但这通常不如直接使用HTML标签简洁明了。 2. JavaScript 实现 在JavaScript中，...

    js动态生成table

    newRow.innerHTML = '&lt;td&gt;' + item.name + '&lt;/td&gt;&lt;td&gt;' + item.age + '&lt;/td&gt;'; tbody.appendChild(newRow); }); ``` 在这个例子中，`动态生成table.htm`可能是一个包含上述代码的HTML文件，用于演示这些操作。而`...

    HTML Select 下拉菜单功能扩展

    然而，通过扩展和利用JavaScript库，我们可以极大地增强`&lt;select&gt;`下拉菜单的功能，使其更加交互化、动态化和可定制化。本篇文章将探讨如何利用JavaScript和相关工具来扩展HTML的下拉菜单功能。 首先，了解基础的`...

    设置select

    在网页开发过程中，经常需要对页面中的元素进行动态操作，比如清除`&lt;select&gt;`下拉列表中的选项。本文将详细介绍如何使用JavaScript实现`select`清零，并深入探讨相关的知识点。 ### 一、基本概念 #### 1.1 `...

    javascript html js 自定义多级联动下拉菜单,自定义select联动

    - 使用JavaScript获取`&lt;select&gt;`元素并绑定`onChange`事件。 - 在事件处理函数中，获取当前选中的值，并据此更新下一个级别的`&lt;select&gt;`选项。 - 可能需要对数据进行处理，比如将值映射到相应的子级数据集。 - ...

    解决ajax返回innerHTML中javascript不能运行问题

    解决 Ajax 返回 innerHTML 中 ...解决 Ajax 返回 innerHTML 中 JavaScript 不能运行问题的关键是将 JavaScript 代码从 Ajax 返回的数据中提取出来，并将其添加到 `&lt;head&gt;` 中，让浏览器能够正确地解析和执行。

    下拉框的内容通过js插入到table中

    在本场景中，我们讨论的是如何使用JavaScript操作HTML表格（`&lt;table&gt;`元素）以及下拉框（`&lt;select&gt;`元素）的内容。下面将详细阐述如何通过JavaScript的`insertRow`方法将下拉框的内容插入到表格中，并使用`delRow`...

    利用JS与HTML实现地级市的简易的二级联动

    而城市列表的`&lt;select&gt;`元素被设置为禁用（`disabled`），因为它的内容将由JavaScript动态生成。 接下来，我们转向JavaScript，它是实现动态更新的关键。JavaScript可以监听DOM（文档对象模型）事件，比如`change`...

    动态循环加载select中选中的值

    我们可以使用以下JavaScript代码动态生成`&lt;option&gt;`并设置选中状态： ```javascript // 假设data是从服务器获取的JSON数据 let data = [ { "value": "option1", "selected": true }, { "value": "option2", ...

    用javascript写的windows资源管理器

    &lt;br&gt;这里需要说明的是很少用到了innerHTML和innerTEXT两个方法，这是微软提供的专利方法，还没有得到W3C的认可，&lt;br&gt;在别的浏览器里面这两个方法不一定会被支持。&lt;br&gt;所以很多地方是用了DOM的方式进行处理。&lt;br&gt;&lt;br&gt;...

    JavaScript学习笔记.pdf

    &lt;/p&gt;&lt;button type="button" onclick="myFunction()"&gt;点击这里&lt;/button&gt;&lt;script&gt;function myFunction(){document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";}&lt;/script&gt;&lt;/body&gt; 4、外部的 ...

    js时间函数

    &lt;br&gt; if(num==0){&lt;br&gt; &lt;br&gt; }else{&lt;br&gt; &lt;br&gt; }&lt;br&gt; document.getElementById("CurrentDate").innerHTML=Year+str[0][0]+Month+str[0][1]+Day+str[0][2]+" "+Hour+str[0][3]+Minute+str[0][4]+Second+str[0][5]+" "+...

    HTML教程全集

    HTML表单用于收集用户输入，常见的表单元素有`&lt;input&gt;`（各种类型，如文本、密码、复选框等）、`&lt;textarea&gt;`（多行文本输入）、`&lt;select&gt;`（下拉列表）和`&lt;button&gt;`。`&lt;form&gt;`元素封装表单，`action`属性定义提交...

Magicbox
Global site tag (gtag.js) - Google Analytics