set selectedIndex value for dynamic drop-down list

動的に作成されたselect objectのoptionを設定する方法を紹介する。
大まかに、動的にリストを作成する部分とoptionの値を設定する部分の二に分けて説明する。
今回の例ではjavascript libraryのdojo¹⁾frameworkを利用した。
ちなみに、テストはInternet Explorer(以下IE)７,8とFireFox(以下FF)3で行われた。

まず、動的にoptionリストを作成する部分だが、コードの一部分を次に示す。

function createOpt(label, value){
   var opt=document.createElement('option');
   opt.appendChild(document.createTextNode(label));
   opt.setAttribute('value',value);
   return opt;
}

ここで、labelはoptionのテキストで、valueはoptionの値である。

次にoptionの値を設定する部分だが、ブラウザごとに実装が違うので確認する必要がある。 IE7とFF3だと次のコードが有効である。

function setVals(obj, value){
   for(var i=0; i<obj.options.length; i++){
      if(obj.options[i].value == value){
         obj.options[i].setAttribute("selected", "true");
         break;
      }
   }
}

ここで、objはselect object,valueは設定されるoptionの値である。しかし、ＩＥ6だと場合によっては上記のコードが駄目になることがある。

確実な方法としてはdrop-downリストを作成する際に、値を設定することがある。そのコードを次に示す。

function createOpt(label, value, val){
   var opt=document.createElement('option');
   opt.appendChild(document.createTextNode(label));
   opt.setAttribute('value',value);
   if(value==val) opt.setAttribute("selected", "true");
   return opt;
}

source code

今回のテストで使ったソースコードを次に示す。

<html>
<SCRIPT TYPE="text/javascript" SRC="http://o.aolcdn.com/dojo/1.3/dojo/dojo.xd.js"></SCRIPT>
<script type="text/javascript">
<!--
 
    dojo.addOnLoad(function(){
       init();
       setVals(dojo.byId("kind"), "h");
 
});
 
function createOpt(label, value){
   var opt=document.createElement('option');
   opt.appendChild(document.createTextNode(label));
   opt.setAttribute('value',value);
   return opt;
}
 
function init(){
   dojo.byId("kind").innerHTML = "";
   dojo.byId("kind").appendChild(createOpt("aa","a"));
   dojo.byId("kind").appendChild(createOpt("bb","b"));
   dojo.byId("kind").appendChild(createOpt("cc","c"));
   dojo.byId("kind").appendChild(createOpt("dd","d"));
   dojo.byId("kind").appendChild(createOpt("ee","e"));
   dojo.byId("kind").appendChild(createOpt("ff","f"));
   dojo.byId("kind").appendChild(createOpt("gg","g"));
   dojo.byId("kind").appendChild(createOpt("hh","h"));
   dojo.byId("kind").appendChild(createOpt("ii","i"));
}
 
function setVals(obj, value){
   for(var i=0; i<obj.options.length; i++){
      if(obj.options[i].value == value){
         obj.options[i].setAttribute("selected", "true");
         break;
      }
   }
}
//-->
</script>
<body>
 
<select name="kind" id="kind">
<option value="-">-----</option>
</select>
</body>
</html>

Test page

テストする為にページをrefreshしてください。 <html> <SCRIPT TYPE=“text/javascript” SRC=“http://o.aolcdn.com/dojo/1.3/dojo/dojo.xd.js”></SCRIPT> <script type=“text/javascript”> <!–

  dojo.addOnLoad(function(){
     init();
     setVals(dojo.byId("kind"), "h");

});

function createOpt(label, value){

 var opt=document.createElement('option');
 opt.appendChild(document.createTextNode(label));
 opt.setAttribute('value',value);
 return opt;

}

function init(){

 dojo.byId("kind").innerHTML = "";
 dojo.byId("kind").appendChild(createOpt("aa","a"));
 dojo.byId("kind").appendChild(createOpt("bb","b"));
 dojo.byId("kind").appendChild(createOpt("cc","c"));
 dojo.byId("kind").appendChild(createOpt("dd","d"));
 dojo.byId("kind").appendChild(createOpt("ee","e"));
 dojo.byId("kind").appendChild(createOpt("ff","f"));
 dojo.byId("kind").appendChild(createOpt("gg","g"));
 dojo.byId("kind").appendChild(createOpt("hh","h"));
 dojo.byId("kind").appendChild(createOpt("ii","i"));

}

function setVals(obj, value){

 for(var i=0; i<obj.options.length; i++){
    if(obj.options[i].value == value){
       obj.options[i].setAttribute("selected", "true");
       break;
    }
 }

} –> </script> <body> <select name=“kind” id=“kind”> <option value=“-”>—–</option> </select> </body> </html> ~~DISCUSSION~~

¹⁾
現在、最新のバージョンは1.4である。

目次

set selectedIndex value for dynamic drop-down list

source code

Test page