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

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);

インスタンス全体の完全なコードは次のとおりです。

コードをコピーします

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

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)
}