'name'속성 태그를 사용하는 여러 select2 요소에 대한 jQuery 선택자

Question

내 양식의 다양한 입력 및 선택 요소에 대한 유효성 검증 오류를 출력하려합니다. 하지만 클래스/속성 선택기를 사용하여 요소를 가져 오는 것 같습니다. Im 부트 스트랩의 form-contorl 클래스를 사용하여 모든 입력을 식별하고 select2 플러그인을 사용하여 선택 상자를 수정합니다.

표준 입력 상자와 선택 상자에서는 잘 작동하지만 이름 특성 끝에 '[]'가 필요한 다중 선택 상자에서는 실패하고 빈 jquery 개체를 반환합니다.

편집 : Btw 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와 선택기를 통해 입력 요소를 선택하는 방법에 어떤 아이디어가?

Answer 1

당신은 속성을 사용할 수는 jQuery를 버전에서 선택

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>

로 시작 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>

당신은 속성 값에서 다른 검색 알고리즘을 사용 시도 할 수 있습니다 또한 Why can't jQuery 3 identify the '#' character in an attribute selector?

Answer 2

참조, 예를 들어 속성 ​​선택 시작 - $(".form-control[name^='genres']")

전체 설명을 https://api.jquery.com/category/selectors/attribute-selectors/