1. 동적으로 선택 생성
다음과 같이 코드 코드를 복사합니다.
함수 createSelect(){
var mySelect = document.createElement_x("select");
mySelect.id = "mySelect";
document.body.appendChild(mySelect);
}
2. 옵션 옵션 추가
다음과 같이 코드 코드를 복사합니다.
함수 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. 모든 옵션 삭제 옵션
다음과 같이 코드 코드를 복사합니다.
함수 제거All(){
var obj=document.getElementByIdx_x('mySelect');
obj.options.length=0;
}
4. 옵션옵션 삭제
다음과 같이 코드 코드를 복사합니다.
함수 제거원(){
var obj=document.getElementByIdx_x('mySelect');
//인덱스, 삭제할 옵션의 일련 번호. 여기에는 현재 선택된 옵션의 일련 번호가 필요합니다.
var index=obj.selectedIndex;
obj.options.remove(index);
}
5. 옵션 옵션의 값을 가져옵니다.
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("새 텍스트","새 값");
8.삭제 선택
다음과 같이 코드 코드를 복사합니다.
함수 제거선택(){
var mySelect = document.getElementByIdx_x("mySelect");
mySelect.parentNode.removeChild(mySelect);
}
전체 예제의 전체 코드는 다음과 같습니다.
다음과 같이 코드 코드를 복사합니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<머리>
<meta http-equiv="Content-Type" content="text/html">
<머리>
<스크립트 언어=자바스크립트>
함수 $(id)
{
document.getElementByIdx_x(id) 반환
}
함수 표시()
{
var selectObj=$("지역")
var myOption=document.createElement_x("옵션")
myOption.setAttribute("value","10")
myOption.appendChild(document.createTextNode("상하이"))
var myOption1=document.createElement_x("옵션")
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(발==10)
{
var i=$("context").childNodes.length-1;
var remobj=$("context").childNodes[i];
remobj.removeNode(true)
var sh=document.createElement_x("선택")
sh.add(new Option("푸동 신지역","101"))
sh.add(new Option("황푸구","102"))
sh.add(new Option("서회구","103"))
sh.add(new Option("푸퉈구","104"))
$("컨텍스트").appendChild(sh)
}
if(발==100)
{
var i=$("context").childNodes.length-1;
var remobj=$("context").childNodes[i];
remobj.removeNode(true)
var nj=document.createElement_x("선택")
nj.add(new Option("쉬안우 지구","201"))
nj.add(new Option("白下区","202"))
nj.add(new Option("샤관구","203"))
nj.add(new Option("치샤구","204"))
$("컨텍스트").appendChild(nj)
}
}
함수계산()
{
var x=$("context").childNodes.length-1;
경고(x)
}
함수 제거()
{
var i=$("context").childNodes.length-1;
var remobj=$("context").childNodes[i];
remobj.removeNode(true)
}
</script>
<본문>
<div id="컨텍스트">
<select id="area" onchange="choice()">
</select>
</div>
<입력 유형=버튼 값="표시" onclick="표시()">
<입력 유형=버튼 값="계산 노드" onclick="calc()">
<입력 유형=버튼 값="삭제" onclick="제거()">
</body>
</html>
개선된 버전: 선택 항목에서 옵션 요소 추가, 수정, 삭제
다음과 같이 코드 코드를 복사합니다.
function watch_ini(){ // 초기
for(var i=0; i<arguments.length; i++){
var word = document.createElement_x("OPTION");
word.text = 인수[i];
watch.keywords.add(word); // watch는 양식 이름입니다.
}
}
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; i<arguments.length; i++){
var 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옵션;
}
전체 예제의 전체 코드는 다음과 같습니다.
다음과 같이 코드 코드를 복사합니다.
<!doctype html public "-//w3c//dtd html 4.0 전환//en">
<html>
<머리>
<title>자바스크립트 선택 옵션 텍스트 값</title>
<meta name="keywords" content="javascript 선택 옵션 텍스트 값 추가 수정 삭제 세트">
<meta name="description" content="javascript 선택 옵션 텍스트 값 추가 수정 삭제 설정">
<스크립트 언어="자바스크립트">
<!--
function watch_ini(){ // 초기
for(var i=0; i<arguments.length; i++){
var 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옵션;
}
function watch_sel(f){ // 편집
f.word.value = f.keywords[f.keywords.selectedIndex].text;
}
function watch_mod(f){ // 수정
f.keywords[f.keywords.selectedIndex].text = f.word.value;
}
function watch_del(f){ // 삭제
f.keywords.remove(f.keywords.selectedIndex);
}
function watch_set(f){ // 저장
var 세트 = "";
for(var i=0; i<f.keywords.length; i++){
세트 += f.keywords[i].text + ";";
}
확인(설정);
}
//-->
</script>
</head>
<본문>
<form name="watch" method="post" action="">
<select id="MySelect" name="keywords" size="10" onchange="watch_sel(this.form)"></select><br>
<스크립트 언어="자바스크립트">
<!--
watch_ini("I","You","","He","She","It","Er") // 초기 키워드
//-->
</script>
<input type="text" name="word" /><br />
<input type="button" value="추가" onclick="watch_add(this.form);"
<input type="button" value="수정" onclick="watch_mod(this.form);"
<input type="button" value="삭제" onclick="watch_del(this.form);"
<input type="button" value="Save" onclick="watch_set(this.form);"
</form>
문자열에서 배열 메서드를 만듭니다.
다음과 같이 코드 코드를 복사합니다.
<스크립트 언어="자바스크립트">
</body>
</html>
<스크립트>
함수 분할(){
datastr="2,2,3,5,6,6";
var str= 새로운 배열();
str=datastr.split(",");
for (i=0;i<str.length ;i++)
{ document.write(str[i]+"<br/>") }
}
스플리();
</script>
오늘 js 일부를 디버깅했는데 IE에서는 제대로 실행되었습니다. 그러나 Firefox에서 디버깅할 때 오류가 발생했습니다.
obj.add(new Option("text","value")); //이것은 IE에서만 유효합니다.
obj.options.add(new Option("text","value")); //IE 및 Firefox와 호환됩니다.
이 코드 때문에 인터넷에서 정보를 검색하고 이 글을 모아서 예전 js를 실시간으로 리뷰하게 되었습니다.