时间戳

首页 > 解决方案 > 如何使用 JQuery 在选择元素上设置数据属性

jquery - 如何使用 JQuery 在选择元素上设置数据属性

问题描述

我正在尝试在<select>标签内添加简单的值。我该怎么做？

下面我准备了示例它应该是什么样子。

<script>
$(document).ready(function(){

  $("#selectList").add("data-size='12'");

});
</script>

<select class='selectpicker' data-hide-disabled='true' id='selectList'>
</select>


// expected result
<select class='selectpicker' data-hide-disabled='true' id='selectList' data-size='12'>
</select>

标签： jquery

解决方案

使用 vanilla Javascript 非常容易：

document.addEventListener('DOMContentLoaded', () => {
  selectList.dataset.size='12';
  console.log(selectList);
})
<select class="selectpicker" data-hide-disabled="true" id="selectList"></select>

您也可以selectList.setAttribute('data-size', '12')改用。

在 jQuery 中：

$(document).ready(function() {
  $('#selectList').attr('data-size', '12');
  console.log(selectList);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selectpicker" data-hide-disabled="true" id="selectList"></select>

推荐阅读