집 >웹 프론트엔드 >JS 튜토리얼 >js 작업 select 및 option에 일반적으로 사용되는 코드_기본 지식

js 작업 select 및 option에 일반적으로 사용되는 코드_기본 지식

WBOY원래의: 2016-05-16 17:46:301356검색

1. 선택한 항목의 값과 텍스트를 가져옵니다. :

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

다음 스크립트 코드 사용 s 선택한 값 및 텍스트 가져오기

코드 복사 코드는 다음과 같습니다. $("#mySelect" ).val(); //선택한 레코드의 값을 가져옵니다.

$("#mySelect option:selected").text(); 선택한 레코드

 

새로운 Option("text","value") 메소드를 사용하여 옵션 옵션을 추가합니다

코드 복사 code 다음과 같습니다: var obj = document.getElementById("mySelect");obj.add(new Option("4"," 4"));

3. 모든 옵션 옵션 삭제

코드 복사 코드는 다음과 같습니다. var obj = document.getElementById("mySelect");obj.options.length = 0;

4 . 선택한 옵션 옵션 삭제

코드 복사 코드는 다음과 같습니다. var obj = document.getElementById("mySelect");var index = obj.selectedIndex;obj.options .remove(index);

5. 선택한 옵션 옵션 수정

코드 복사 코드는 다음과 같습니다. var obj = document.getElementById("mySelect ");

var index = obj.selectedIndex;

obj.options[index] = new Option( "two",3); //해당 값 변경
obj.options[index].selected = true; //선택된 상태 유지

6. 삭제 선택
 

코드 복사

코드는 다음과 같습니다. var obj = document.getElementById("mySelect") ; obj.parentNode.removeChild(obj); 🎜>

7. 선택한 응답 이벤트를 선택하세요

코드 복사

$("#mySelect").change(function(){ //실행해야 할 내용 추가 연산 코드})

1. 동적으로 select 생성

코드 복사

코드는 다음과 같습니다. 함수 createSelect(){ var mySelect = document.createElement_x("select"); mySelect.id = "mySelect"; document.body.appendChild(mySelect)

2. 옵션 추가

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

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

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

} 

3. 모든 옵션 옵션 삭제

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

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

4. 옵션 옵션 삭제

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

 
 RemovefunctionOne(){ 
var obj=document.getElementByIdx_x('mySelect'); 
//index, 옵션의 일련 번호를 삭제하려면 여기에서 현재의 일련 번호를 가져옵니다. selected option 
var index=obj .selectedIndex; 
obj.options.remove(index); 
} 

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

var obj=document.getElementByIdx_x('mySelect '); 
var index=obj.selectedIndex ; //일련번호, 현재 선택된 옵션의 일련번호 가져오기 
var val = obj.options[index].value; >
6. 옵션 텍스트 가져오기

코드 복사

코드는 다음과 같습니다. var obj=document.getElementByIdx_x('mySelect'); var index=obj.selectedIndex; //일련번호, 현재 선택한 옵션의 일련번호 가져오기var val = obj. options[index].text;

7. 옵션 옵션 수정

코드 복사

코드는 다음과 같습니다. var obj=document.getElementByIdx_x('mySelect '); var index=obj.selectedIndex; 현재 선택된 옵션 var val = obj.options[index]=new Option("new text", "new value")

삭제

코드 복사

코드는 다음과 같습니다. function RemoveSelect(){ var mySelect = document.getElementByIdx_x("mySelect"); mySelect.parentNode.removeChild(mySelect);

}

 
전체 인스턴스의 전체 코드는 다음과 같습니다
:

코드 복사

코드는 다음과 같습니다.

<머리>

<머리>
<스크립트 언어=JavaScript>
function $(id)
{
return document.getElementByIdx_x(id)
}
function show()
{
var selectObj=$("area")
var myOption=document.createElement_x("option")
myOption.setAttribute("value","10")
myOption.appendChild(document.createTextNode("上海"))
var myOption1= document.createElement_x("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_x("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_x("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)
}

<본문>

下:

function watch_ini(){ // 初始
for(var i=0; ivar word = document.createElement_x("OPTION" ); word.text = 인수[i]; watch.keywords.add(단어); // 보다. 양식 이름입니다 } } function watch_add(f){ // 增加 var word = document.createElement_x("OPTION");

word.text = f.word.value;

f.keywords.add(단어); 
} 

但上述 add() 方法只재IE下有效，为兼容FF와 Opera，对上述代码进行了一下改进，改动后代码如下： 

复代码

 代码如下:

function watch_ini(){ // 初始
for(var i=0; ivar oOption=new Option(arguments[i],arguments[i]); document.getElementByIdx_x("MySelect")[i]=oOption; } } function watch_add(f){ // 추가 var oOption=new Option(f.word.value,f.word.value); f.keywords[f.keywords.length]=o옵션;

}

 
整个实例的完整代码如下
： 

复主代码

代码如下:

<머리>
javascript 선택 옵션 텍스트 값

<스크립트 언어="javascript">

<본문>

사용일个字符串创建一个数组방식:

复主代码代码如下:

今天调试了一段js，在ie上运行良好，在fire狐上调试流现错误，查资料发现

复主代码代码如下:

 
obj.add(new Option("文本","值")); //这个只能在IE中有效 
obj.options.add(new Option("text","value")); //这个兼容IE는firefox 

因为这段代码, 网上查资料收藏了这篇文章, 实时的温故js
共勉!

성명：

이전 기사：CSS 스타일 시트 파일을 동적으로 추가하는 JS 함수_기본 지식다음 기사：CSS 스타일 시트 파일을 동적으로 추가하는 JS 함수_기본 지식

js 작업 select 및 option에 일반적으로 사용되는 코드_기본 지식

관련 기사