26992


こんなHTMLを

[code]

    <select>
      <option data-select="a" value="A">A</option>
      <option data-select="b" value="B">B</option>
      <option data-select="c" value="c">c</option>
    </select>
    
[/code]

jQueryでカスタムデータ属性の値を取得して配列で受け取りたい。

[code]

    //期待する結果
    ["a","b","c"]
    
[/code]

以下のコードを作成しましたが意図したデータを作成できませんでした。

[code]

    var ary = $('[data-select]');
    console.log( ary );
    // 配列で [option, option, option] が返る
    
    var str = $('[data-select]').data('select');
    console.log( str );
    // a のみが返る
    
[/code]

ここからの処理の方法をご教示いただければ幸いです。  
どうぞ、よろしくお願い申し上げます。


CC BY-SA 3.0
2016-06-23T06:05:44.717
26988
2016-06-23T08:37:13.373
2016-06-23T06:29:47.740
2304
2304
question
javascript html jquery
HTMLのカスタムdata属性の値を配列で受け取りたい


たぶん命令一発で配列とりたいってことなんだろうけど、  
取得対象が複数のElementに渡ってるので無理な気がします。  
下記のようにしないと駄目じゃないかなぁ

[code]

    var ary = $('[data-select]');
    var str = [];
    for(var n=0,len=ary.length;n<len;n++){
      str.push(ary[n].getAttribute('data-select'));
    }
    
    console.log( str );
    console.log( str[0] );
    console.log( str[1] );
    console.log( str[2] );
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <select>
      <option data-select="a" value="A">A</option>
      <option data-select="b" value="B">B</option>
      <option data-select="c" value="c">c</option>
    </select>
[/code]

また、data属性内で配列を使えないわけじゃないです。

[code]

    var str = $('select').data("select");
    console.log( str );
    console.log( str[0] );
    console.log( str[1] );
    console.log( str[2] );
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <select data-select='["a","b","c"]'>
      <option data-select="a" value="A">A</option>
      <option data-select="b" value="B">B</option>
      <option data-select="c" value="c">c</option>
    </select>
[/code]


CC BY-SA 3.0
2016-06-23T06:36:27.103
26992
2016-06-23T06:36:27.103
26988
answer


特定のプロパティのみ抽出したい時は`.map()`メソッドを使うのがスマートかと。  
余計な変数も置かずに済みます。

[code]

    var result = $("option").map(function(){
      return $(this).data('select');
    }).toArray();
    console.log(result);
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <select>
      <option data-select="a" value="A">A</option>
      <option data-select="b" value="B">B</option>
      <option data-select="c" value="c">c</option>
    </select>
[/code]


CC BY-SA 3.0
2016-06-23T07:48:48.150
26996
2016-06-23T08:11:11.753
2016-06-23T08:11:11.753
8532
8532
26988
answer


jQueryの[`.toArray()`](https://api.jquery.com/toArray/)や[`.get()`](http://api.jquery.com/get/)で要素のArrayが取得できるので、それを[`Array.prototype.map()`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map)で変換すればよいかと思います。

[code]

    var ary =
      $('[data-select]').toArray().map(
        function(option, index) {
          return option.dataset.select;
        }
      );
    
    console.log(ary);
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <select>
      <option data-select="a" value="A">A</option>
      <option data-select="b" value="B">B</option>
      <option data-select="c" value="c">c</option>
    </select>
[/code]


CC BY-SA 3.0
2016-06-23T08:04:59.057
26998
2016-06-23T08:37:13.373
2016-06-23T08:37:13.373
3068
3068
26988
answer