jQuery html 에서 jsp 에서 유효 하지 않 은 원인 및 해결 방법

4073 단어 jQueryhtml 유효jsp 무효
최근 jQuery 로 드 롭 다운 상자 의 옵션 값 을 좌우 로 이동 시 켰 습 니 다.코드 는 다음 과 같 습 니 다.
 
<!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/javascript" src="../js/jquery-1.4.2.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$("input").hover(function(){ 
$(this).val("") 
}, 
function(){ 
$(this).val(this.defaultValue) 
} 
) 
}) 

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")}) 
}) 

function len(){ 
var sel = document.getElementById("select2"); 
alert(sel.length); 
} 

</script> 
<style type="text/css"> 
*{ margin:0; padding:0;} 
input{ color:#ccc;} 

div.centent { 
float:left; 
text-align: center; 
margin: 10px; 
} 
span { 
display:block; 
margin:2px 2px; 
padding:4px 10px; 
background:#898989; 
cursor:pointer; 
font-size:12px; 
color:white; 
} 
</style> 
</head> 

<body> 
<input type="text" value="aaaaa" /><br /> 

<div class="centent"> 
<select multiple="multiple" id="select1" style="width:100px;height:160px;"> 
<option value="1">  1</option> 
<option value="2">  2</option> 
<option value="3">  3</option> 
<option value="4">  4</option> 
<option value="5">  5</option> 
<option value="6">  6</option> 
<option value="7">  7</option> 
</select> 
<div> 
<img id="add" src='../img/content/arrowRight_disabled.gif' width="24" height="24" border='0' style="cursor:pointer; vertical-align:middle;" /> 
<span id="add_all" >       >></span> </div> 
</div> 

<div class="centent"> 
<select multiple="multiple" id="select2" style="width: 100px;height:160px;"> 
<option value="8">  8</option> 
</select> 
<div> 
<img id="remove" src='../img/content/arrowLeft_disabled.gif' height="22" border='0' style="cursor:pointer; vertical-align:middle;" /> 
<span id="remove_all"><<       </span> 
</div> 
</div> 
<input name="sub" type="submit" onClick="len()" value="  " /> 
</body> 
</html>
이 파일 로 탐색 할 때 사용 할 수 있 지만 jsp 에 넣 으 면 사용 할 수 없습니다.어 리 석 은 방법 으로 해결 하고 alert 방법 을 써 서 신문 이 무슨 잘못 인지 보고 문제점 을 발견 했다.jQuery 의 function 앞의$와 JSP 페이지 의 JSTL 의$가 충돌 하여 이 대상 방법 을 모 르 게 만 들 었 다.해결 방법:jQuery 코드 에 있 는$를 모두 jQuery 로 바 꾸 면 정상적으로 사용 할 수 있 습 니 다!
JS 는 select(드 롭 다운)에서 선택 한 값 의 예제 코드 를 가 져 옵 니 다.
Js 날짜 선택 입력 상자 에 자동 채 우기(인터페이스 예 쁜 호 환 화 호)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage