'name'属性タグを使用する複数のselect2要素のjQueryセレクタ

Question

フォーム上のさまざまな入力要素と選択要素に検証エラーを出力しようとしています。しかし、私はクラス/属性セレクタを使用して要素を取得することはできません。 私はすべての入力を識別するためにブートストラップからフォームcontorlクラスを使用し、選択ボックスを修正するためにselect2プラグインを使用します。

これは、標準の入力ボックスと選択ボックスでうまく動作しますが、name属性の最後に '[]'が必要なマルチプル選択ボックスでは、失敗して空の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/