Селектор jQuery для нескольких элементов select2 с использованием тега атрибута «имя»

Я пытаюсь вывести ошибки проверки на различные входные данные и выбрать элементы в моей форме. Но я не могу получить элемент, используя селектор класса/атрибута. Я использую класс form-contorl из начальной загрузки, чтобы идентифицировать все входные данные, и плагин select2, чтобы исправить поля выбора.

Это отлично работает со стандартными полями ввода и выбора, но с несколькими полями выбора, для которых требуется «[]» в конце атрибута имени, происходит сбой и возвращается пустой объект jquery.

РЕДАКТИРОВАТЬ: Кстати, eKey возвращает 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?


javascript jquery twitter-bootstrap select2
person Orbitall    schedule 25.10.2016    source источник

Ответы (2)


arrow_upward
0
arrow_downward

You can use attribute begins with selector 

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>

или escape-строка селектора

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>

См. также Почему jQuery 3 не может определить ' символ #' в селекторе атрибутов?

person guest271314    schedule 25.10.2016
comment
Вау быстрый ответ, много вариантов, спасибо. Я не пробовал ни один из этих вариантов раньше. Селектор начала кажется лучшим решением, потому что было бы неудобно изменять «eKey» для каждой проверки. - person Orbitall; 26.10.2016

arrow_upward
0
arrow_downward

Вы можете попробовать использовать разные алгоритмы поиска в значении атрибута, например, атрибут начинается с селектора - $(".form-control[name^='genres']")

Полное описание https://api.jquery.com/category/selectors/attribute-selectors/

person polyn0m    schedule 25.10.2016