2011年2月17日木曜日

javascriptでselectのoptionを動的に変化させるサンプル

<script type="text/javascript">
<!--
gOption = [];
gOption[0] = {"1":"goo","2":"iiii","3":"foo"};
gOption[1] = {}
gOption[2] = {"4":"eiei","5":"aaaaa"};
gOption[3] = {"6":"foo","7":"haa","8":"eeee"};

function setSelectOptions(aSelect, aItems) {
    aSelect.options.length = 0;
   
    var index = 1;
    aSelect.options.length = index;
    aSelect.options[index-1] = new Option(' ', ' ');
    index++;
    for ( key in aItems ) {
        aSelect.options.length = index;
        aSelect.options[index-1] = new Option(aItems[key], key);
        index++;
    }
}
// -->
</script>

<form name="myForm">
<select name="Maker" onChange="setSelectOptions(document.myForm.Computer, gOption[this.selectedIndex])" style="width:150px;">
    <option value="a" selected="selected">foo</option>
    <option value="b">bbb</option>
    <option value="c゙">ccc</option>
    <option value="d">ddd</option>
    <option value="e">eee</option>
  </select>
  <select name="Computer" style="width:100px;">
    <option value="g">ggggg</option>
    <option value="h">hhh</option>
    <option value="i" selected="selected">iiiiii</option>
  </select>
</form>

0 件のコメント:

コメントを投稿