多次元配列をドロップダウンリストに表示　多次元配列を取得

#追記 2018/05/31
自分で検索してこの記事見つけてわかりずらかったので
シンプルに配列表示だけの部分を貼っておきます。

```jsx
var winObj =new Window("palette", "Modular Scale", undefined);

var listGrp =winObj.add("group",/*[20,0,300,30]*/);
listGrp.orientation = "row";
var ddl = listGrp.add("dropdownlist",undefined);

    var ratioObj = [
        ["15:16-minor second",1.067],
        ["8:9 – major second",1.125],
        ["5:6 – minor third",1.2],
        ["4:5 – major third",1.25],
        ["3:4 – perfect fourth",1.333],
        ["1:√2 – aug. fourth / dim. fifth",1.414],
        ["2:3 – perfect fifth",1.5],
        ["5:8 – minor sixth",1.6],
        ["1:1.618 – golden section",1.618],
        ["3:5 – major sixth",1.667],
        ["9:16 – minor seventh",1.778],
        ["8:15 – major seventh",1.875],
        ["1:2 – octave",2],
        ["2:5 – major tenth",2.5],
        ["3:8 – major eleventh",2.667],
        ["1:3 – major twelfth",3],
        ["1:4 – double octave",4],
        ]

for(var i=0; i<ratioObj.length; i++){
ddl.add("item",ratioObj[i][0]);
}

ddl.selection=8;

winObj.show()

```

##過去の記事はここから↓
#まえがき
やっかいだったのが、ドロップダウンリストの取得方法でした。
「項目名」か項目番号（インデックス）の２通りでこの項目名が何者なのか・・・文字列でも無い？？
その「項目名」から「多次元配列のデータを１つだけ取り出す」この部分だけで３日程苦戦していました。。。
色んなやり方や方法を考え、試行錯誤し、やっと出来ました。
この先色んな事をやりたいのに、こんなとこで躓いてると震えてきます(笑)

#やりたい事
①ドロップダウンリストを作成
②リストの中は配列一覧を表示
③配列の中は多次元配列になっている
④取得は多次元配列のデータを一つだけ取り出す。

#コードと動作（完成品）
内容はわかりやすく簡素化しています

```js
//配列一覧-----------------
var ratioBasic=[
["1-0",1,2],//selection index 0～
["2-0",1,2],
];
//配列ここまで-----------------

//Window メイン
var winObj = new Window("palette","ドロップダウンリスト");
//---------------------window---------------------
var  nOne=winObj.add("group");
var info=nOne.add("statictext",undefined,"Ratio :");
var ddl = nOne.add("dropdownlist");

//--------------------表示内容------------------------------
for(var i=0; i<ratioBasic.length; i++){
ddl.add("item",ratioBasic[i]);
}

//default dll.selection index 0=ratioBasic配列の["1-0",1,2]をセレクト状態にする
ddl.selection=0;

//--------------------表示内容　ここまで--------------------

//------------選択項目の取得----------------
var textbutton = winObj.add("button",undefined,"取得");
textbutton.onClick = function(){
    var ds=ddl.selection;
    var dsText=ds.toString ();
        for ( var i=0; ratioBasic.length; i++){
            if ((dsText)==(ratioBasic[i]))  break;
        }
       var rbNum=ratioBasic[i][2];
        alert(rbNum)
}

winObj.show();
```

![キャプチャ.JPG](https://qiita-image-store.s3.amazonaws.com/0/178061/bead03f2-36d8-4083-5625-44cec0381c3d.jpeg)

#解説
####配列について
配列に関しては、特に問題ないですが、多次元配列を使っています。

```js
//配列一覧-----------------
var ratioBasic=[
["1-0",1,2],//selection index 0～
["2-0",1,2],
];
//配列ここまで-----------------
```
####GUIウィンドウ
ここも特に大丈夫ですね。
内容はメインウィンドウにドロップダウンリストを追加した状態です。

```js
//Window メイン
var winObj = new Window("palette","ドロップダウンリスト");
//---------------------window---------------------
var  nOne=winObj.add("group");
var info=nOne.add("statictext",undefined,"Ratio :");
var ddl = nOne.add("dropdownlist");
```

####GUIウィンドウのドロップダウンリストに配列を表示
ここでは配列一覧をfor文で表示しています。
また最初のデフォルトで配列の["1-0",1,2]をセレクトさせた状態にしています。

```js
//--------------------表示内容------------------------------
for(var i=0; i<ratioBasic.length; i++){
ddl.add("item",ratioBasic[i]);
}

//default dll.selection index 0=ratioBasic配列の["1-0",1,2]をセレクト状態にする
ddl.selection=0;
//--------------------表示内容　ここまで--------------------
```

![bandicam 2017-05-10 13-36-13-046.jpg](https://qiita-image-store.s3.amazonaws.com/0/178061/36df77fd-31b5-2564-568d-51571b9c90d4.jpeg)

####ドロップダウンリストの多次元配列の１つだけ取り出す
ここが一番悩んだ部分でした。

```js
//------------選択項目の取得----------------
var textbutton = winObj.add("button",undefined,"取得");
textbutton.onClick = function(){
    var ds=ddl.selection;
    var dsText=ds.toString ();
        for ( var i=0; ratioBasic.length; i++){
            if ((dsText)==(ratioBasic[i]))  break;
        }
       var rbNum=ratioBasic[i][2];
        alert(rbNum)
}
```

####解説
まずリストは
ddl.selectionでセレクトしている状態の1-0,1,2は返ってきます。
ただddl.select == ratioBasic[0]では同じでは無いんです。
これは困りました。配列と文字列とは別で「項目名」というものが存在するのか・・・
そこで一度ドロップダウンリストのセレクト状態のデータを文字列に変換

```js
    var ds=ddl.selection;
    var dsText=ds.toString ();
```
そして配列の中の物と一致するもの調べ、一致したらbreak
breakのありがたさを実感。。。

```js
        for ( var i=0; ratioBasic.length; i++){
            if ((dsText)==(ratioBasic[i]))  break;
        }
```
そしてブレークしたデータを取得
多次元配列の一つだけを取得しています。

```js
       var rbNum=ratioBasic[i][2];
        alert(rbNum)
```
#あー３日悩んだのが、10分でブログで説明が終わった。
ホントこんなとこで悩んでるのが、情けない。。。
しかし！これでやっと次のステップに進めます。