jQuery 使用 'name' 属性标签的多个 select2 元素的选择器

Question

我试图在表单上的各种输入和 select 元素上输出验证错误。但我似乎无法使用 class/attribute selector 获取元素。我使用 bootstrap 中的 form-contorl class 来识别所有输入，并使用 select2 插件来修复 select 框。

这适用于标准输入和 select 框，但是对于多个 select 框，需要在名称属性末尾使用“[]”，它会失败并且 returns 一个空的 jquery 对象。

编辑：顺便说一句 eKey returns genres 没有 [].

HTML

<select id="genre-select" class="form-control select2-hidden-accessible" multiple="" name="genres[]" tabindex="-1" aria-hidden="true">
    <option value="1">RPG</option>
    <option value="2">FPS</option>
    <option value="3">MMO</option>
</select>

JS

$.each(errors, function (eKey, messages){

    var $input = $('.form-control[name=' + eKey + ']');
    //do stuff with error messages (bootstrap popovers)
});

关于如何通过 jquery select 或 select 输入元素的任何想法？

Answer 1

您可以使用以选择器开头的属性

var eKey = "genres";
var $input = $('.form-control[name^=' + eKey + ']');
console.log($input[0].name);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="genre-select" class="form-control select2-hidden-accessible" multiple="" name="genres[]" tabindex="-1" aria-hidden="true">
    <option value="1">RPG</option>
    <option value="2">FPS</option>
    <option value="3">MMO</option>
</select>

或转义选择器字符串

var eKey = "genres\[\]";
var $input = $('.form-control[name=' + eKey + ']');
console.log($input[0].name);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="genre-select" class="form-control select2-hidden-accessible" multiple="" name="genres[]" tabindex="-1" aria-hidden="true">
    <option value="1">RPG</option>
    <option value="2">FPS</option>
    <option value="3">MMO</option>
</select>

在 jQuery 版本 3+

var eKey = $.escapeSelector("genres[]");
var $input = $('.form-control[name=' + eKey + ']');
console.log($input[0].name);

<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<select id="genre-select" class="form-control select2-hidden-accessible" multiple="" name="genres[]" tabindex="-1" aria-hidden="true">
    <option value="1">RPG</option>
    <option value="2">FPS</option>
    <option value="3">MMO</option>
</select>

另见

Answer 2

您可以尝试在属性值中使用不同的搜索算法，例如属性以选择器开头 - $(".form-control[name^='genres']")

完整描述 https://api.jquery.com/category/selectors/attribute-selectors/

jQuery 使用 'name' 属性标签的多个 select2 元素的选择器

jQuery selector for multiple select2 element using 'name' attribute tag

javascript

jquery

twitter-bootstrap

select2