菜单

jQuery在html有效在jsp无效的原因及解决方法,根据选择不同的下拉值出现相对应的文本输入框

2019年8月2日 - 前端排行

复制代码 代码如下:

最近用jQuery来写下拉框的选项值的左右移动,代码如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;;
<html xmlns=”;;
<head>
<%@ page language=”java” import=”java.util.*4166m金沙,”
pageEncoding=”utf-8″%>
<%@taglib prefix=”s” uri=”/struts-tags”%>
<title>无标题文档</title>
<script language=”javascript”>
function $(obj){return document.getElementById(obj);}
function show(objid) {$(objid).style.display=’inline’;}
function hidden(objid) {$(objid).style.display=’none’;}
function doit(){
var sel_val=$(‘sel’).value;
if (sel_val==”) {hidden(‘a1’);hidden(‘a2’);}
if (sel_val==0) {hidden(‘a1’);hidden(‘a2’);}
if (sel_val==1) {show(‘a1’);hidden(‘a2’);}
if (sel_val==2) {show(‘a2’);hidden(‘a1’);}
}
</script>
</head>

复制代码 代码如下:

<body>
<select name=”sel” id=”sel” onchange=”javascript:doit();”>
<option selected=”selected”>请选择</option>
<option value=”0″>不要输入框</option>
<option value=”1″>输入框1</option>
<option value=”2″>输入框2</option>
</select>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>无标题文档</title>
<script type=”text/javascript”
src=”../js/jquery-1.4.2.js”></script>
<script type=”text/javascript”>
$(function(){
$(“input”).hover(function(){
$(this).val(“”)
},
function(){
$(this).val(this.defaultValue)
}
)
})

<input value=”输入框1″ type=”text” name=”a1″ id=”a1″
style=”display:none;” />
<input value=”输入框2″ type=”text” name=”a2″ id=”a2″
style=”display:none;” />
<br />
<br />
</body>
</html>

jQuery(function(){
//左侧加到右侧
jQuery(“#add”).click(function(){$(“#select1
option:selected”).appendTo(“#select2”)})

//右侧加到左边
jQuery(“#remove”).click(function(){$(“#select2
option:selected”).appendTo(“#select1”)})

//全部加到右边
jQuery(“#add_all”).click(function(){$(“#select1
option”).appendTo(“#select2”)})

//全部移动左边
$(“#remove_all”).click(function(){$(“#select2
option”).appendTo(“#select1”)})

//双击加到右边
$(“#select1”).dblclick(function(){$(“option:selected”,this).appendTo(“#select2”)})
//双击移动左边
$(“#select2”).dblclick(function(){$(“option:selected”,this).appendTo(“#select1”)})
})

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图