js显示内容
js显示内容求助
①<textarea name="" cols="50" rows="10" id="xs" onclick="sum1();"></textarea>
document.getElementById("xs").innerHTML = str.replace(/\r\n/g,'<br/>');
我希望文本域中的内容能换行，怎么改？
② <select id="jineng" size="7" multiple="multiple">
多选不用ctrl就直接多选，怎么实现？
③ <td valign="top">最想了解的技术:<br /><select name="" size="1">
<textarea>获取【最想了解的技术】里面的内容怎么实现？
------解决思路----------------------
1、 str.replace('/,/g', '\n')换行
2、可以用插件jquery multiselect
3、没明白问题
------解决思路----------------------
js 中有选择器的...
你可以通过选择器选择到符合查询条件的dom对象,
然后对对象进行操作
textarea换行我记得css中有可以设置的...当然你要是想通过js控制换行的话也可以通过js动态加载css就好了....
我比较习惯用jquery来实现这些问题
------解决思路----------------------
这段代码只针对你的第2个问题，我了个去，居然 花了我一个从小时。。不容易啊。。。
样式，你要调整一下。
这个是写一个LI模拟多选，在获取值的时候，直接获取 <input type="hidden" value="" id="val">的值就可以了。
------解决思路----------------------
不用按ctrl实现多选
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/jscript">
window.onload = initAll;
function $(id){return document.getElementById(id)}
function initAll(){
var clearUser = $("user");
var clearPass = $("pass");
clearUser.onfocus = function ( )
{
clearUser.value = "";
}
clearPass.onfocus = function ( )
{
clearPass.value = "";
}
}
function Test()
{
o = document.getElementById("jineng");
var intvalue="";
for(i=0;i<o.length;i++){
if(o.options[i].selected){
intvalue+=o.options[i].value+",";
}
}
alert( intvalue.substr(0,intvalue.length-1) );
}
var dr=document.getElementsByTagName("div"),i,t="";
function submit1(num,type){
t="";
var dri=dr[num].getElementsByTagName("input");
for(i=0;i<dri.length;i++){
if(dri[i].checked){
if(type==0){
//if(type=="radio"){
alert(dri[i].value);
break;
}else{
t=t+dri[i].value+";";
}
}
}
if(type==1) alert(t);
}
</script>
</head>
<body>
<table width="843" border="0">
<tr>
<td width="305" height="36">用户名：<input name="" type="text" id="user" /></td>
<td width="522">密码：<input name="" type="password" id="pass"/></td>
</tr>
<tr>
<td height="78"><div>常去网站：<br /><input name="" type="checkbox" value="****" />****<input name="" type="checkbox" value="MSDN" />MSDN<input name="" type="checkbox" value="新闻网" />新闻网<br /><input name="" type="checkbox" value="计世网" />计世网<input name="" type="checkbox" value="教程网" />教程网</div></td>
<td>默认搜索：<br /><input name="" type="checkbox" value="" />baidu<input name="" type="checkbox" value="" />google<br /><input name="" type="checkbox" value="" />yahoo<input name="" type="checkbox" value="" />MSN</td>
</tr>
<tr>
<td>掌握技能：<br />
<select id="jineng" size="7" multiple="multiple">
<option value="ASP网站开发">ASP网站开发</option>
<option value="Access和SQL Server">Access和SQL Server</option>
<option value="ASP.NET网站开发">ASP.NET网站开发</option>
<option value="ADO.NET编程">ADO.NET编程</option>
<option value="XML应用">XML应用</option>
<option value="DIV+CSS">DIV+CSS</option>
</select></td>
<td valign="top">最想了解的技术:<br /><select name="" size="1">
<option>设计模式</option>
<option>编程模式</option>
<option>开发模式</option>
</select></td>
</tr>
<tr>
<td><input type="button" value="提交" onclick="sum1()"/><input type="button" value="重置" /><input type="button" value="list" onclick="Test()"/></td>
<td> </td>
</tr>
<tr>
<td height="167">您输入的信息为：</td>
<td><textarea name="" cols="50" rows="10" id="xs" onclick="sum1();"></textarea></td>
</tr>
</table>
<script>
function sum1() {
var n1 = document.getElementById("user").value;
var n2 = document.getElementById("pass").value;
var o = document.getElementById("jineng");
var intvalue="";
for(i=0;i<o.length;i++){
if(o.options[i].selected){
intvalue+=o.options[i].value+",";
}
}
var n3 = intvalue.substr(0,intvalue.length-1) ;
var dr=document.getElementsByTagName("div"),i,t="";
var dri=dr[0].getElementsByTagName("input");
for(i=0;i<dri.length;i++)
{
if(dri[i].checked)
{
s=dri[i].value;
}
}
var str = "姓名"+n1+' '+"密码"+n2+' '+"掌握技能："+n3+' '+"常去网站："+s;
document.getElementById("xs").innerHTML = str.replace(/\r\n/g,'<br/>');
//str.split(" ").join("<br />")
}
</script>
点击提交按钮输出内容
</body>
</html>
①<textarea name="" cols="50" rows="10" id="xs" onclick="sum1();"></textarea>
document.getElementById("xs").innerHTML = str.replace(/\r\n/g,'<br/>');
我希望文本域中的内容能换行，怎么改？
② <select id="jineng" size="7" multiple="multiple">
多选不用ctrl就直接多选，怎么实现？
③ <td valign="top">最想了解的技术:<br /><select name="" size="1">
<textarea>获取【最想了解的技术】里面的内容怎么实现？
------解决思路----------------------
1、 str.replace('/,/g', '\n')换行
2、可以用插件jquery multiselect
3、没明白问题
------解决思路----------------------
js 中有选择器的...
你可以通过选择器选择到符合查询条件的dom对象,
然后对对象进行操作
textarea换行我记得css中有可以设置的...当然你要是想通过js控制换行的话也可以通过js动态加载css就好了....
我比较习惯用jquery来实现这些问题
------解决思路----------------------
<!DOCTYPE html>
<html>
<head>
<title>try</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="x-rim-auto-match" content="none">
<script src="jquery-mobile/jquery-1.11.1.min.js"></script>
<script>
$(function(){
var tmp="";
var selecthtml="<font color=red>√</font> ";
var val=$("#val").val();
var state=$("#imglist").find("li").attr("state");
$("#selectbox").click(function(){
$("#imglist").show();
$("li").unbind("click").click(function(){
if($(this).attr("state")==""){
$(this).attr("state","1");
tmp= tmp + $(this).attr("dataval") + ",";
$("#val").attr("value",tmp);
$(this).html(selecthtml + $(this).attr("dataval"));
}else if($(this).attr("state")=="1"){
$(this).attr("state","");
tmp= tmp.replace($(this).attr("dataval") + ",","");
$("#val").attr("value",tmp);
$(this).html($(this).attr("dataval"));
}
});
});
$(".close").click(function(){
if(tmp==""){
$("#selectbox").html("请选择..");
}else{
$("#selectbox").html(tmp);
}
$("#imglist").hide();
});
});
</script>
<style>
div{cursor:pointer;font-size:12px;}
#selectbox{width:200px;height:40px;line-height:40px;float:left; background:#999;}
#imglist{width:200px;height:auto; background:#69F;float:left;}
#imglist ul{width:100%;height:auto;}
#imglist ul li{width:100%;height:auto; float:left; border-bottom:#fff solid 1px; line-height:40px;}
.close{width:100%;line-height:40px; background:#999; text-align:center;margin-top:-1px; float:left;}
</style>
</head>
<body>
<div id="selectbox">请选择..</div>
<div id="imglist" style="display:none;">
<ul>
<li dataval="测试A" state="">测试A</li>
<li dataval="测试B" state="">测试B</li>
<li dataval="测试C" state="">测试C</li>
<li dataval="测试D" state="">测试D</li>
<li dataval="测试E" state="">测试E</li>
<li dataval="测试F" state="">测试F</li>
<li dataval="测试G" state="">测试G</li>
</ul>
<div class="close">close</div>
<input type="hidden" value="" id="val">
</div>
</body>
</html>
这段代码只针对你的第2个问题，我了个去，居然 花了我一个从小时。。不容易啊。。。
样式，你要调整一下。
这个是写一个LI模拟多选，在获取值的时候，直接获取 <input type="hidden" value="" id="val">的值就可以了。
------解决思路----------------------
不用按ctrl实现多选
<select id="mySelect" size="8" multiple="multiple">
<option value="">00001</option>
<option value="">00002</option>
<option value="">00003</option>
<option value="">00004</option>
<option value="">00005</option>
<option value="">00006</option>
<option value="">00007</option>
<option value="">00008</option>
</select>
<script type="text/javascript">
document.getElementById("mySelect").onchange=function(event){
var ind = this.selectedIndex;
this.selectedIndex = -1;
var op = this.options;
op[ind].mySelected = !op[ind].mySelected;
for(var i=0, l = op.length; i<l; i++)
op[i].selected = op[i].mySelected;
}
</script>