現在位置: start » study » javascript » dojo » select_2

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

次のリビジョン		前のリビジョン
study:javascript:dojo:select_2 [2009/06/24 01:11] – created bananastudy:javascript:dojo:select_2 [2009/06/24 01:53] (現在) – banana
行 3: 行 3:
 大まかに、動的にリストを作成する部分とoptionの値を設定する部分の二に分けて説明する。\\ 大まかに、動的にリストを作成する部分とoptionの値を設定する部分の二に分けて説明する。\\
 今回の例ではjavascript libraryの**dojo((現在、最新のバージョンは1.4である。))**frameworkを利用した。\\ 今回の例ではjavascript libraryの**dojo((現在、最新のバージョンは1.4である。))**frameworkを利用した。\\
-ちなみに、テストは**Internet Explorer(以下IE)**７,8と**FireFox(以下FF)**3で行われた。\\+ちなみに、テストは**Internet Explorer(以下IE)**７,8と**%%FireFox%%(以下FF)**3で行われた。\\
  
 まず、動的にoptionリストを作成する部分だが、コードの一部分を次に示す。 まず、動的にoptionリストを作成する部分だが、コードの一部分を次に示す。
行 30: 行 30:
 </code> </code>
 ここで、objはselect object,valueは設定されるoptionの値である。 ここで、objはselect object,valueは設定されるoptionの値である。
-しかし、ＩＥ6場合によっては上記のコードが+しかし、**ＩＥ6**だと場合によっては上記のコードが駄目になることがある。\\
  
 +確実な方法としてはdrop-downリストを作成する際に、値を設定することがある。
 +そのコードを次に示す。
 +<code javascript>
 +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;
 +}
 +</code>
 +{{keywords>set selectedIndex Select Object drop-down list dojo}}
 +
 +===== source code =====
 +今回のテストで使ったソースコードを次に示す。
 +<code html>
 +<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>
 +</code>
 +
 +===== 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~~

トレース: • z-index • select_2 • prevent_paste • select

QR Code
QR Code study:javascript:dojo:select_2 (generated for current page)