select 美化，并且能把先定的值通过FORM传到变量里

devil_1005 2009-12-24 12:28:18
select 美化，并且能把先定的值通过FORM传到下一个页，网上要不就是单纯的美代，但是都是JS的不知道怎么通过FORM传到变量里，请大家帮帮忙。
我手上有一个代码，是美化的SELECT，但是我不想要后面的输入，下拉里的内容固定就可以。
有高手帮改一改呗。

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<style type="text/css">
.divMain
{
border-style:solid;
border-width:1px;
border-color:#0099ff;
position:absolute;
left:72px;
top:36px;
width:157px;
height:25px;
z-index:1;
overflow: visible;
}

.divText
{
border-style:none;
border-width:1px;
border-color:#0099ff;
position:absolute;
left:76px;
top:39px;
width:125px;
height:15px;
z-index:2;
font-size:x-small;
font-family:Tahoma;
color:#0099FF;
}

.content
{
border-style:solid;
border-width:1px;
border-color:#0099ff;
position:absolute;
left:72px;
top:60px;
width:136px;
height:25px;
z-index:3;
visibility: hidden;
}

.spanCss
{
width:100%;
color:#666666;
font-family:Tahoma;
font-size:x-small;
cursor:hand;
}

.button
{
BORDER-RIGHT: #7b9ebd 1px solid;
PADDING-RIGHT: 5px;
padding-top:2px;
BORDER-TOP: #7b9ebd 1px solid;
PADDING-LEFT: 5px;
FONT-SIZE: 10pt;
FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cccccc);
BORDER-LEFT: #7b9ebd 1px solid;
CURSOR: hand;
BORDER-BOTTOM: #7b9ebd 1px solid
}
</style>
<body>
<div id="divMain" class="divMain"></div>
<div id="divText" class="divText"></div>
<div id="content" class="content" onClick="onClickContent('content')" >
</div>
<div id="button" onClick="onClickBtn('content')" style="border-left-style:solid;border-left-width:1px;border-left-color:#CCCCCC;cursor:hand;position:absolute; left:207px; top:36px; width:15; height:25px; z-index:4;"><img src="1.jpg" width="15" height="15" hspace="3" vspace="5"></div>
<div id="Layer1" style="position:absolute; left:285px; top:37px; width:292px; height:103px; z-index:5">
<form name="form1" method="post" action="">
<input class="button" name="button" type="button" id="button" value="添加项" onClick="addItem()">
<input type="text" id="textfield" name="textfield" value="">
</form>
</div>
<script language="javascript">
var flag;
flag=false;
function onSelected(obj)
{
document.getElementById('divText').innerText=obj.innerText;
}

function onClickBtn(obj)
{
if (flag==false)
{
document.getElementById(obj).style.visibility="visible";
flag=true;
}
else
{
document.getElementById(obj).style.visibility="hidden";
flag=false;
}
}

function onClickContent(obj)
{
document.getElementById(obj).style.visibility="hidden";
flag=false;
}

function hiddenDiv()
{
if (flag==true)
document.getElementById('content').style.visibility="hidden";
}

function changeColor(obj)
{obj.style.backgroundColor="#ccc";}

function changeColorBack(obj)
{obj.style.backgroundColor="";}

function addItem()
{
if (document.getElementById('textfield').value=="")
{
alert("input data first!");
return ;
}
var str;
var value;
value=document.getElementById('textfield').value;
str="<span onClick='onSelected(this)' ";
str+="class='spanCss'";
str+="onMouseMove='changeColor(this)' onMouseOut='changeColorBack(this)'>"+value+"</span>";
// alert(str);
document.getElementById('content').innerHTML+=str;
}
//document.onclick=hiddenDiv;
</script>
</body>
...全文
92 1 打赏 收藏 转发到动态 举报
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
wbhggwk 2009-12-24
  • 打赏
  • 举报
 回复 


<script language="JavaScript" type="text/JavaScript">

<!--

function MM_reloadPage(init) {  //reloads the window if Nav4 resized

  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {

    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}

  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();

}

MM_reloadPage(true);

//-->

</script>

<style type="text/css">

.divMain

{

border-style:solid;

border-width:1px;

border-color:#0099ff;

position:absolute;

left:72px;

top:36px;

width:157px;

height:25px;

z-index:1;

overflow: visible;

}



.divText

{

border-style:none;

border-width:1px;

border-color:#0099ff;

position:absolute;

left:76px;

top:39px;

width:125px;

height:15px;

z-index:2;

font-size:x-small;

font-family:Tahoma;

color:#0099FF;

}



.content

{

border-style:solid;

border-width:1px;

border-color:#0099ff;

position:absolute;

left:72px;

top:60px;

width:136px;

height:25px;

z-index:3;

visibility: hidden;

}



.spanCss

{

width:100%;

color:#666666;

font-family:Tahoma;

font-size:x-small;

cursor:hand;

}



.button

{

BORDER-RIGHT: #7b9ebd 1px solid;

PADDING-RIGHT: 5px;

padding-top:2px;

BORDER-TOP: #7b9ebd 1px solid;

PADDING-LEFT: 5px;

FONT-SIZE: 10pt;

FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cccccc);

BORDER-LEFT: #7b9ebd 1px solid;

CURSOR: hand;

BORDER-BOTTOM: #7b9ebd 1px solid

}

</style>

<body>

<div id="divMain" class="divMain"> </div>

<div id="divText" class="divText"> </div>

<div id="content" class="content" onClick="onClickContent('content')" >

<span class="spanCss" onmouseout="changeColorBack(this)" onmousemove="changeColor(this)" onclick="onSelected(this)" style="">dfsdfdf </span><br/>

<span class="spanCss" onmouseout="changeColorBack(this)" onmousemove="changeColor(this)" onclick="onSelected(this)" style="">fffff </span><br/>

<span class="spanCss" onmouseout="changeColorBack(this)" onmousemove="changeColor(this)" onclick="onSelected(this)" style="">sssss </span>

</div>

<div id="button" onClick="onClickBtn('content')" style="border-left-style:solid;border-left-width:1px;border-left-color:#CCCCCC;cursor:hand;position:absolute; left:207px; top:36px; width:15; height:25px; z-index:4;"> <img src="1.jpg" width="15" height="15" hspace="3" vspace="5"> </div>



<script language="javascript">

var flag;

flag=false;

function onSelected(obj)

{

document.getElementById('divText').innerText=obj.innerText;

}



function onClickBtn(obj)

{

if (flag==false)

{

  document.getElementById(obj).style.visibility="visible";

  flag=true;

}

else

{

  document.getElementById(obj).style.visibility="hidden";

  flag=false;

}

}



function onClickContent(obj)

{

document.getElementById(obj).style.visibility="hidden";

flag=false;

}



function hiddenDiv()

{

if (flag==true)

  document.getElementById('content').style.visibility="hidden";

}



function changeColor(obj)

{obj.style.backgroundColor="#ccc";}



function changeColorBack(obj)

{obj.style.backgroundColor="";}



/*function addItem()

{

if (document.getElementById('textfield').value=="")

{

  alert("input data first!");

  return ;

}

var str;

var value;

value=document.getElementById('textfield').value;

str=" <span onClick='onSelected(this)' ";

str+="class='spanCss'";

str+="onMouseMove='changeColor(this)' onMouseOut='changeColorBack(this)'>"+value+" </span>";

// alert(str);

document.getElementById('content').innerHTML+=str;

}*/

//document.onclick=hiddenDiv;

</script>

</body>

ok.
貌似只能在Ie下用
技术胖--前端学习html5表单美化部分笔记
灰色的提示是h5的哪个特性？ 有的浏览器需要点击两次新增的表单类型email,Date,Range,Tel,search,color……文本框中，输入一次，下一次在输入会自动提示是哪个特性？和初始化页面之后，如何让input自动获得焦点？表单验证的新特性html中如何设置表单元素必填？html5表单验证如何使用正则表达式？html5表单中设置了必填，提交表单的时候如何做到不验证？或者前一个是在form标签之后用的后一个input submit的按钮上面运用的场景：一个按钮要验证，一个不用验证，不用验证的那个
Django学习笔记（6）——Form表单
知识储备：HTML表单form学习 　　表单，在前端页面中属于最常见的一个东西了。基本上网站信息的提交都用到了表单，所以下面来学习Django中优雅的表单系统：Form 　　表单的主要作用是在网页上提供一个图形用户页面，用作采集和提供用户输入数据。 　　表单的基本结构： <form></form> 1，from表单常用属性 action ：表单提交的服务器地址...
JS列表的下拉菜单组件(仿美化控件select)
今天是农历23 也是小年，在这祝福大家新年快乐！今天给大家分享的是：JS列表的下拉菜单组件，因为目前项目正好要用到这个，所以提前研究了下，看到KISSY也有这么一个组件，所以自己也封装了一个，KISSY demo链接 KISSY组件名字叫 "一个解决大数据列表渲染效率的下拉菜单组件。", 他对这个组件做了一次小优化。(假如服务器返回10000条数据或者更多的话，那么我们前端一...
一文解决python的GUI--python程序员必会GUI库-神器PySimpleGUI良心总结
import PySimpleGUI as sg def 总体说明(): #下面这个layout变量就是控件的集合,里面放空间 #将来我们直接把这个变量传到窗口(屏幕)那里 #你可以把它当作实际内容 #以下是个简单的例子 layout = [[sg.Text("要显示在窗口上的文字")], [sg.Button("完成")]] #他还有参数,你懂的:title='Options',etitle_color='rd', #sg.Win...
c# 窗体开发1 基本控件的使用
1 namespace firstly #当前命名空间控件 2 { 3 public partial class Form1 : Form 4 { 5 public Form1() #第一个窗体 6 { 7 InitializeComponent(); 8 } 9 } 10 } winform 代码结构 1...
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章