select 태그의 JavaScript 제어(옵션옵션/select)_javascript 기술

html의 선택 태그는 asp.net의 asp:DropDownList 컨트롤이기도 합니다.
Javascript의 동작
1. 기본 이해

코드 복사 코드는 다음과 같습니다. 다음:

var e = document.getElementById("selectId")
e.options= new Option("text","value")//옵션 생성 즉, 하나 이상의 text
//options는 <에 여러 개의 텍스트 다음과 같은 태그

1: 옵션[ ] 배열 속성:
길이 속성---------길이 속성
selectedIndex 속성---------현재 선택된 상자에 있는 텍스트의 인덱스 값입니다. 이 인덱스 값은 (첫 번째 텍스트에 해당하는 메모리 (0,1,2,3...)에 의해 자동으로 할당됩니다. value , 두 번째 텍스트 값, 세 번째 텍스트 값, 네 번째 텍스트 값...)
2: 단일 옵션의 속성(---obj.options[obj.selecedIndex] 지정된 ---)
텍스트 속성---------텍스트
값 속성을 반환/지정합니다------<옵션과 일치하는 값을 반환/지정합니다. 값="...">.
index 속성---------아래 첨자를 반환하고,
selected 속성-------객체 선택 여부를 반환/지정합니다. true 또는 false를 지정하면 선택한 항목이 동적으로 변경될 수 있습니다.
defaultSelected 속성-----객체가 기본적으로 선택되어 있는지 여부를 반환합니다. 참/거짓.
3: 옵션 메소드
태그 추가 -----obj.options.add(new("text","value")); ;option> 라벨------obj.options.remove(obj.selectedIndex)
라벨의 텍스트를 가져옵니다.----obj.options[obj.selectedIndex ]. text
태그 값 수정----obj.options[obj.selectedIndex]=new Option("New Text","New Value")
모든 태그 삭제------obj.options.length = 0
태그 값 가져오기------obj.options[obj.selectedIndex].value
참고:
a: 위 메소드는 obj.add()와 같이 IE 및 FF에서의 호환성을 고려하기 때문에 obj.funciton 대신 obj.options.function()과 같은 유형의 메소드로 작성됩니다. IE에서만 유효합니다.
b: obj.option의 옵션은 대문자로 표기할 필요가 없으며, 새 옵션의 옵션은 대문자로 표기해야 합니다.

2. 애플리케이션

코드 복사 코드는 다음과 같습니다.

<스크립트 언어= "javascript">
함수 번호(){
var obj = document.getElementById("mySelect")
//obj.options[obj.selectedIndex] = new Option( "My food ","4");//현재 선택한 항목의 값 변경
//obj.options.add(new Option("My Eat","4"));다른 옵션 추가
//alert(obj.selectedIndex);//일련번호 표시, 옵션은 자체적으로 설정됩니다
//obj.options[obj.selectedIndex].text = "내 음식" 값 변경
// obj.remove(obj.selectedIndex);함수 삭제
}


내 가방
내 노트
내 기름
내 부담

/body>



1. 동적으로 선택

코드 복사

> 코드는 다음과 같습니다. function createSelect(){ var mySelect = document.createElement("select") mySelect.id = "mySelect "; document.body.appendChild(mySelect) }

2. 옵션 추가




코드 복사

코드는 다음과 같습니다.

function addOption(){ //id를 기준으로 객체 찾기, var obj=document.getElementById('mySelect'); //옵션 추가obj.add(new Option("text","value")); //IE에서만 유효합니다

obj.options.add(new Option(" text ","value")); //IE 및 Firefox와 호환됩니다

}


3. 모든 옵션 옵션 제거

코드 복사 코드는 다음과 같습니다.

function RemoveAll( ){
var obj=document.getElementById('mySelect');
obj.options.length=0;
}

4.

코드 복사 코드는 다음과 같습니다.

function RemoveOne(){
var obj=document.getElementById( 'mySelect');
//index, 삭제할 옵션의 일련 번호, 여기서는 현재 선택된 옵션의 일련 번호를 가져옵니다.
var index=obj.selectedIndex; >obj.options.remove(index);
}

5. 옵션 값 가져오기

코드 복사 코드는 다음과 같습니다.

var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; 현재 선택된 옵션의 일련번호
var val = obj.options[index].value

6. 옵션의 텍스트 가져오기

코드 복사 코드는 다음과 같습니다.

var obj=document.getElementById('mySelect')
var index= obj.selectedIndex; //일련번호, 현재 선택된 옵션의 일련번호 가져오기
var val = obj.options[index] .text

7.

코드 복사 코드는 다음과 같습니다.

var obj=document.getElementById('mySelect');

var index=obj.selectedIndex; //일련번호, 현재 선택한 옵션의 일련번호 가져오기
var val = obj.options[index]= new Option("새 텍스트","새 값") ;


8. 삭제 선택

코드 복사 코드는 다음과 같습니다.

function RemoveSelect(){
var mySelect = document.getElementById("mySelect");
mySelect.parentNode.removeChild(mySelect);
}


<머리>

<머리>
<스크립트 언어=JavaScript>
function $(id)
{
return document.getElementById(id)
}
function show()
{
var selectObj=$("area")
var myOption=document.createElement("option")
myOption.setAttribute("value","10")
myOption.appendChild(document.createTextNode("上海上"))
var myOption1= document.createElement("option")
myOption1.setAttribute("value","100")
myOption1.appendChild(document.createTextNode("南京"))
selectObj.appendChild(myOption)
selectObj.appendChild(myOption1)
}
함수 선택()
{
var index=$("area").selectedIndex;
var val=$("area").options[index].getAttribute("value")
if(val==10)
{
var i=$("context") .childNodes.length-1;
var remobj=$("context").childNodes[i];
remobj.removeNode(true)
var sh=document.createElement("select")
sh.add(new Option("浦东新区","101"))
sh.add( new Option("黄浦区","102"))
sh.add(new Option("徐汇区","103"))
sh.add(new Option("普陀区","104 "))
$("context").appendChild(sh)
}
if(val==100)
{
var i=$("context").childNodes. 길이-1;
var remobj=$("context").childNodes[i];
remobj.removeNode(true)
var nj=document.createElement("select")
nj.add(new Option("玄武区","201"))
nj.add( new Option("白下区","202"))
nj.add(new Option("下关区","203"))
nj.add(new Option("栖霞区", "204"))
$("context").appendChild(nj)
}
}
function calc()
{
var x=$("context") .childNodes.length-1;
alert(x)
}
function delete()
{
var i=$("context").childNodes.length-1;
var remobj=$("context").childNodes[i];
remobj.removeNode(true)
}

<
change="choice()"에서 id="area"를 선택하세요.>

根据这些东西,自己用 JQEURY AJAX JSON实现了一个小功能如下:
JS代码:(只取了于SELECT상关代码)

复主代码 代码如下:

/**
* @description 컴포넌트 연결 드롭다운 목록(JQUERY의 AJAX 및 JSON을 사용하여 구현됨)
* @prarm selectId 드롭다운 목록의 ID
* @prarm method 호출할 메서드 이름
* @prarm temp this
에 소프트웨어 ID 저장* @prarm url
으로 이동할 주소*/
함수 linkAgeJson(selectId,method,temp,url){
$j.ajax({
type: "get",//사용 get 메소드는 백엔드에 액세스합니다
dataType: "json",//json 형식으로 데이터를 반환합니다
url: url,//액세스할 백엔드 주소
data: "method=" method "&temp= " temp, //전송할 데이터
success: function(msg){//msg는 반환된 데이터입니다. 여기서 데이터 바인딩을 수행하세요
var data = msg.lists;
coverJsonToHtml(selectId,data) ;
}
});
}
/**
* @description JSON 데이터를 HTML 데이터 형식으로 변환
* @prarm selectId 드롭다운 목록의 ID
* @prarm nodeArray 반환된 JSON 배열
*
*/
functioncoverJsonToHtml(selectId,nodeArray){
//선택
var tempSelect= $ j("#" selectId);//선택 값 지우기
isClearSelect(selectId,'0')
var tempOption=null
for(var i=0;i//선택 옵션 만들기
tempOption= $j('' nodeArray[i].mc '< / 옵션> 🎜>}
/**
* @description 드롭다운 목록의 값 지우기
* @prarm selectId 드롭다운 목록의 ID
* @prarm index 지우기를 시작할 인덱스 위치
*/
function isClearSelect(selectId,index){
var length=document.getElementById(selectId).options.length
while( length!= index){
//길이를 다시 가져와야 하므로 길이가 변경됩니다.
length=document.getElementById(selectId).options.length
for(var i=index;idocument.getElementById(selectId).options.remove(i)
length=length/2;
}
}
/**
* @description 저하된 구성 요소 목록 가져오기
* @prarm selectId1 소프트웨어 드롭다운 목록의 ID 참조
* @prarm selectId2 저하된 구성 요소 드롭다운 목록의 ID
*/
function getCpgjThgl (selectId1,selectId2){
var obj1=document.getElementById(selectId1);//참조 소프트웨어 드롭다운 목록
var obj2=document.getElementById(selectId2);//구성 요소 퇴화 목록
var len= obj1.options.length;
//참조된 소프트웨어 목록의 길이가 1과 같을 때 반환, 아무 작업도 수행되지 않음
if(len==1){
return false;
}
// 드롭다운 목록의 값을 지웁니다. 두 가지 방법을 모두 사용할 수 있습니다.
// isClearSelect(selectId2,'1')
document.getElementById(selectId2).length =1;
for(var i=0;i< ;len; i ){
var option= obj1.options[i]
//참조된 소프트웨어의 선택된 항목은 추가되지 않습니다.
if(i!=obj1.selectedIndex){
//OPTION을 복제하고 SELECT
obj2.appendChild(option.cloneNode(true))에 추가
}
}
}


HTML 코드:




코드 복사

코드는 다음과 같습니다.

< ;td class="Search_content" id="yyfb">


tr>

="Edit_mustinput">*인용 소프트웨어:	type="button" class="Search_button_select" onClick="linkAgeTree(' linkage','yyrjtree','yyrjMc','yyrjDm','linkageTree','1'); value="선택.. .">
*인용 분기:	구성 요소 제거:	thgjDm" style="width:160" id="thgjDm"> 없음