JSで動的にオプションを追加・削除する（サンプルコードあり）

JSで動的にオプションを追加・削除する（サンプルコードあり）_javascriptスキル

WBOY

リリース： 2016-05-16 17:38:47

オリジナル

1403 人が閲覧しました

1. 動的に select を作成します

コードをコピーコードは次のとおりです。

 
function createSelect() { 
var mySelect = document.createElement("select"); 
mySelect.id = "mySelect"; 
document.body.appendChild(mySelect);

2 .オプションの追加 option

コードをコピーコードは次のとおりです:

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. オプションの削除 option 

コードをコピーコードは次のとおりです。

function RemoveOne( ){

var obj=document.getElementById('mySelect '); 
//index、削除するオプションのシリアル番号、ここでは現在選択されているオプションのシリアル番号を取得します 
varindex= obj.selectedIndex; 
obj.options.remove(index); 

 
5. オプションの値を取得します

コードをコピーします

コードは次のとおりです。 var obj=document.getElementById('mySelect'); varindex=obj.selectedIndex; //シリアル番号、現在選択されているオプションのシリアル番号を取得します

var val = obj.options[index].value;

6. オプションのテキストを取得します

コードをコピーします

コードは次のとおりです。 var obj=document.getElementById('mySelect'); var index=obj.selectedIndex; //シリアル番号、現在選択されているオプションのシリアル番号を取得します

var = obj.options[index].text ;

7.オプションの変更

コードのコピー

コードは次のとおりです: var obj=document.getElementById ('mySelect'); varindex=obj.selectedIndex; //シリアル番号、現在選択されているオプションのシリアル番号を取得します

var = obj.options[index]=new Option ("新しいテキスト") , "新しい値");

8. 削除選択

コードをコピーします

コードは次のとおりです。 function deleteSelect(){ 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)
}
function Choice()
{
varindex=$("area").selectedIndex;
var val=$("エリア").options[index].getAttribute("値")
if(val==10)
{
var i=$("コンテキスト") .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)
}

改版：選択中追加、修正、删除オプション元素

复制代代码如下:

 
function watch_ini(){ // 最初の 
for(var i=0; ivar word = document.createElement("OPTION" ); 
word.text = 引数[i]; 
watch.keywords.add(単語); // 時計。はフォーム名です 
} 
} 
function watch_add(f){ // 增加 
var word = document.createElement("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.getElementById("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">

一字符串创建一数组方法:

复制代代码如下:

 
<スクリプト言語="javascript"> 
 
 
 
functionspli(){ 
datastr="2,2,3,5,6,6"; 
varstr=newArray(); 
str=datastr.split(","); 
for(i=0;idocument.write(str[i] "
"); 
} } spli(); 
 