기능적 요구 사항
1. 호출이 완료되면 다음과 같이 표시되어야 합니다.
function loadSelect(selectobj){
//스타일을 아름답게 하기 위해 선택 객체를 전달합니다.
}
2. 원본 양식 항목을 변경하지 말고 양식 페이지 코드도 삭제하지 마십시오.
<form name="f" onsubmit="getResult();">
<필드셋>
<legend>사용자 등록</legend>
<div>
<label for="username">계정</label>
<input type="text" id="사용자 이름" name="사용자 이름" />
</div>
<div>
<label for="pwd">비밀번호</label>
<input type="password" name="pwd" id="pwd" />
</div>
<div>
<label for="province">지방</label>
<select id="지방" name="지방">
<option value="10">장시성</option>
<option value="11">푸젠성</option>
<option value="12">광동</option>
<option value="13">절강</option>
</select>
</div>
</fieldset>
<input type="submit" value="Submit" name="btnSub" />
</form>
아이디어를 구현하는
: 양식에서 선택 항목을 숨깁니다.
왜? 이 사람은 너무 완고해서 CSS를 사용하여 원하는 것을 얻을 수 없기 때문에 간단합니다. 그러니 죽여라.
2단계: 스크립트를 사용하여 웹페이지에서 선택 태그의 절대 위치를 찾습니다.
우리는 DIV 태그를 사용하여 해당 위치에 그의 대리인 역할을 할 더 보기 좋은 가짜 태그를 만듭니다.
3단계: 스크립트를 사용하여 선택 태그의 값을 읽습니다.
숨겨져 있지만 그 안에 있는 옵션을 계속 사용할 수 있으므로 모두 사용할 수 있습니다.
4단계: 사용자가 div인 선택 태그의 아바타를 클릭할 때. 다른 div를 사용하여 이전 div 아래에 떠 있습니다. 이는 옵션을 대신하는 것입니다.
대략적인 내용입니다. 단계별로 구현해 보겠습니다.
준비
1. 선택 항목을 어떻게 아름답게 만들고 싶은지 생각하고 해당 사진을 준비합니다. 작은 그림 2개를 준비했는데, 드롭다운 화살표 1과 드롭다운 화살표 2입니다. 1은 기본 스타일이고 2는 마우스를 올렸을 때의 스타일입니다.
2. 아래와 같은 공통 양식 제출 페이지를 작성합니다. 참고로 select에 대한 기본 CSS 스타일을 정의하고, 헤드에 js 파일을 호출하는 코드를 추가하고, 바디에 함수를 호출하는 스크립트를 추가했습니다.
자바스크립트
<script type="text/javascript" src="select.js"></script>
작성
새 js 파일을 만들고 select.js로 저장하면 이 js의 나머지 작업이 완료됩니다.
함수 이름: loadSelect(obj);
매개변수: 객체 선택
관련 함수:
//라벨의 절대 위치 가져오기
{
var t = e.offsetTop;
var l = e.offsetLeft;
var w = e.offsetWidth;
var h = e.offsetHeight-2;
동안(e=e.offsetParent)
{
t+=e.offsetTop;
l+=e.offsetLeft;
}
반품 {
상단 :t,
왼쪽: 나,
너비 : w,
높이 : h
}
}
1단계: 선택 항목의 절대 위치를 기록합니다. 잠시 후 교체 선수가 등장했고 나는 내가 어디에 서야 할지 알았다.
var 오프셋=오프셋(obj);
//Offset은 객체의 절대 위치를 구하는 함수라고 설명해주세요. loadSelect() 함수 외부에 작성됩니다. 상단/왼쪽/너비/높이의 네 가지 속성이 있습니다.
2단계: 선택 항목을 숨깁니다.
obj.style.display="없음";
3단계: 가상 div를 사용하여 select
var iDiv = document.createElement("div");
iDiv.id="selectof" + obj.name;
iDiv.style.position = "절대";
iDiv.style.width=offset.width + "px";
iDiv.style.height=offset.height + "px";
iDiv.style.top=offset.top + "px";
iDiv.style.left=offset.left + "px";
iDiv.style.Background="url(icon_select.gif) 반복 없음 오른쪽 4px";
iDiv.style.border="1px 솔리드 #3366ff";
iDiv.style.fontSize="12px";
iDiv.style.lineHeight=offset.height + "px";
iDiv.style.textIndent="4px";
document.body.appendChild(iDiv);
4단계: 원래 선택 항목의 선택되지 않은 값을 지정합니다.
iDiv.innerHTML=obj.options[obj.selectedIndex].innerHTML;
5단계: 아바타에 마우스 오버 스타일을 추가합니다.
iDiv.onmouseover=function(){//마우스 이동
iDiv.style.Background="url(icon_select_focus.gif) 반복 없음 오른쪽 4px";
}
iDiv.onmouseout=function(){//마우스가 멀어짐
iDiv.style.Background="url(icon_select.gif) 반복 없음 오른쪽 4px";
}
6단계: 키 마우스 클릭 이벤트를 추가합니다.
iDiv.onclick=function(){//마우스 클릭
if (document.getElementById("selectchild" + obj.name)){
//div가 생성되었는지 확인
if (childCreate){
//현재 드롭다운이 열려 있는지 확인합니다. 열려 있으면 닫습니다. 닫혀 있으면 열어 보세요.
document.getElementById("selectchild"+ obj.name).style.display="none";
자식생성=false;
}또 다른{
document.getElementById("selectchild" + obj.name).style.display="";
자식만들기=true;
}
}또 다른{
//처음에는 옵션 대신 이전 div 아래에 div를 배치합니다.
var cDiv = document.createElement("div");
cDiv.id="selectchild" + obj.name;
cDiv.style.position = "절대";
cDiv.style.width=offset.width + "px";
cDiv.style.height=obj.options.length *20 + "px";
cDiv.style.top=(offset.top+offset.height+2) + "px";
cDiv.style.left=offset.left + "px";
cDiv.style.Background="#f7f7f7";
cDiv.style.border="1px 솔리드 실버";
var uUl = document.createElement("ul");
uUl.id="uUlchild" + obj.name;
uUl.style.listStyle="없음";
uUl.style.margin="0";
uUl.style.padding="0";
uUl.style.fontSize="12px";
cDiv.appendChild(uUl);
document.body.appendChild(cDiv);
자식만들기=true;
for (var i=0;i<obj.options.length;i++){
//원래 select 태그의 옵션을 li에 추가합니다.
var lLi=document.createElement("li");
lLi.id=obj.options[i].value;
lLi.style.textIndent="4px";
lLi.style.height="20px";
lLi.style.lineHeight="20px";
lLi.innerHTML=obj.options[i].innerHTML;
uUl.appendChild(lLi);
}
var liObj=document.getElementById("uUlchild" + obj.name).getElementsByTagName("li");
for (var j=0;j<obj.options.length;j++){
//li 태그에 대한 마우스 이벤트 추가
liObj[j].onmouseover=function(){
this.style.Background="회색";
this.style.color="흰색";
}
liObj[j].onmouseout=function(){
this.style.Background="흰색";
this.style.color="검정색";
}
liObj[j].onclick=function(){
//두 가지 작업을 수행합니다. 하나는 사용자의 선택 사항을 원래의 선택 태그에 저장하는 것입니다. 그렇지 않으면 아무리 아름다워도 양식이 제출된 후에 선택 값을 얻을 수 없습니다.
obj.options.length=0;
obj.options[0]=new Option(this.innerHTML,this.id);
//동시에 드롭다운을 닫습니다.
document.getElementById("selectchild" + obj.name).style.display="none";
자식생성=false;
iDiv.innerHTML=this.innerHTML;
}
}
}
}
마지막은 조금 더 복잡합니다. 이 단계를 수행하기 전에 이미 선택 항목의 모양이 공개되었습니다. 다음 단계는 선택 항목 뒤에 나타나는 드롭다운 옵션을 모방하는 것입니다. 클릭됩니다.
javascript
를 통해 select 태그의 옵션을 추출하고 다음과 같이 작성할 수 있습니다.
<ul>
<li>옵션이름</li>
<li>옵션이름</li>
<li>옵션이름</li>
</ul>
</div>
기본적으로 그게 다입니다. 아직 몇 가지 결함이 있습니다. 시간이 있으면 함께 추가할 수 있습니다.