时间戳

首页 > 解决方案 > 如何使用jQuery检查数据属性是否存在选择标签选项

jquery - 如何使用jQuery检查数据属性是否存在选择标签选项

问题描述

所以我希望能够检查选择标签选项是否存在。但我希望能够使用数据属性。我已经尝试了所有我能找到的东西，但没有运气。这是我的代码：

if ($("#first-select option[data-id='G']").length > 0) {

//set the option to "selected"

}

此外，完成此操作后，我希望能够将该选项标签设置为选中。我在这里想念什么？我也试过attr('data-id')了.data("id")。没运气。

为了测试，如果上面的陈述是真的，我使用控制台日志来发布一个真实的，但它总是给我错误的。

编辑：我真正想做的是在 ajax 成功执行时执行代码。所以这是我目前拥有的ajax代码：

success: function(data) {

                $("#name").val(data.title);

                var sEl = $("#first-select option[data-id='G']");
                if (sEl.length > 0) {
                    sEl.attr("selected", true);
                }
                else {
                    console.log('doesnt exist!');
                }
            }

HTML：

 <select name="rating" id="first-select">
                        <option value="2" data-id="PG3">PG3</option>
                        <option value="3" data-id="PG-13">PG-13</option>
                        <option value="4" data-id="R">R</option>
                        <option value="1" data-id="G">G</option>
                        <option value="5" data-id="NC-17">NC-17</option>
 </select>

问题是我将data.rated用来获取额定值（可能是 PG、PG-13、R 等），如果额定值存在于我已经拥有的选择中，则给它选择属性。

这似乎仍然不起作用。它曾经工作过，现在似乎不起作用。

标签： jquery

解决方案

似乎您只是想选择data-id与数据集中返回的评级相匹配的选项。似乎您只需要这样的东西（数据变量只是作为从您的 ajax 请求返回的数据的占位符）。

const data = {title: 'A movie', rated: 'G'}

$('#first-select [data-id="' + data.rated + '"]').prop('selected', true);
<select name="rating" id="first-select">
  <option value="2" data-id="PG3">PG3</option>
  <option value="3" data-id="PG-13">PG-13</option>
  <option value="4" data-id="R">R</option>
  <option value="1" data-id="G">G</option>
  <option value="5" data-id="NC-17">NC-17</option>
</select>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

如何处理多选的示例：

const data = {title: 'A movie', rated: 'G,PG3,PG-13'}
const ratings = data.rated.split(',');

$.each(ratings, (index, rating) => {
  $('#first-select [data-id="' + rating + '"]').prop('selected', true);
});
<select name="rating" id="first-select" multiple>
  <option value="2" data-id="PG3">PG3</option>
  <option value="3" data-id="PG-13">PG-13</option>
  <option value="4" data-id="R">R</option>
  <option value="1" data-id="G">G</option>
  <option value="5" data-id="NC-17">NC-17</option>
</select>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

推荐阅读