6

data- 属性を持つ html に option 要素を含めることが可能かどうか、それで、この値を取得する方法が可能かどうか疑問に思っています。

より具体的に。次のコードがあるとしましょう：

<select name="areas" id="areas">
    <option value="1" data-lat="12.243" data-lng="32.43242">Area name</option>
    <option value="2" data-lat="14.243" data-lng="34.43242">Area name</option>
    <option value="3" data-lat="16.243" data-lng="36.43242">Area name</option>
    <option value="4" data-lat="18.243" data-lng="38.43242">Area name</option>
</select>

次に、選択したオプションから jQuery を介して data-lat と data-lng を取得する方法はありますか?

4

4 に答える 4

7

はい、可能です。任意の属性値は、次の方法で取得できます。

$('option:selected').attr('data-lng')

および設定:

$('option:selected').attr('data-lng', 1234);
于 2013-10-04T17:09:06.180 に答える
5

次を使用して属性を設定しますsetAttribute。

document.getElementById('areas')
    .getElementsByTagName('option')[index]
    .setAttribute('data-lng', 'foo');

次を使用して属性を取得しますgetAttribute。

document.getElementById('areas')
    .getElementsByTagName('option')[index]
    .getAttribute('data-lng');

取得と設定の両方:

var el = document.getElementById('areas')
    .getElementsByTagName('option')[index];
el.getAttribute('data-lng');
el.setAttribute('data-lng', 'foo');

注1おそらくクロスブラウザの方が多いので使用document.getElementById('areas').getElementsByTagName('option')[index]しましたが、使用できます

  • document.getElementById('areas').getElementsByTagName('option')[index]
  • document.getElementById('areas').options[index]
  • document.getElementById('areas')[index]

注 2私は and を使用setAttributeしましたが、それらはよりクロスブラウザーであるためですが、 datasetgetAttributeを使用することもできます。

el.dataset.lng;            // get
el.dataset.lng = 'foo';    // set
于 2013-10-04T17:12:16.683 に答える
2

.data要素からデータ属性を取得するために使用できます

$('#areas options').each(function(){
    console.log($(this).data('lat'), $(this).data('lng'));
}

これに対する利点は、.attr型変換が行われるため、この場合は文字列ではなく数値を取得できることです。

于 2013-10-04T17:13:21.330 に答える