2 JSを選択 - HTMLマークアップを無視する

Question

私はSelect2をブートストラップとともに使用しています。

<div class="row"> 
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
     <div class="form-group"> 
      <label class="control-label">Student</label> 
      <select class="form-control" name="student_id" id="student" style="width: 100%;"> 
      <span class="glyphicon form-control-feedback" aria-hidden="true"></span> 
      <div class="help-block with-errors"></div> 
     </div><!-- /.form-group --> 
    </div><!-- /.col-lg-12 --> 
</div><!-- /.row --> 
<div class="row"> 
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
     <div class="form-group"> 
      <label>Firstname</label> 
      <input name="firstname" value="" class="form-control form__input" placeholder="First Name" data-error="Please enter a first name" required> 
      <span class="glyphicon form-control-feedback" aria-hidden="true"></span> 
      <div class="help-block with-errors"></div> 
     </div><!-- /.form-group --> 
    </div><!-- /.col-lg-12 --> 
</div><!-- /.row --> 

私はjQueryの初期化を実行すると、これは、生成したHTMLを壊し、次のように私は、私のHTMLマークアップを持っています。

$('#student').select2(
    { 
     placeholder: "Search For A Student", 
     tokenSeparators: [','], 
     ajax: { 
      url: '/search/students/'+school_id+'', 
      dataType: 'json', 
      delay: 250, 
      data: function (params) 
      { 
       return { 
        q: params.term, // search term 
       }; 
      }, 
      processResults: function (data, params) 
      { 
       // parse the results into the format expected by Select2 
       // since we are using custom formatting functions we do not need to 
       // alter the remote JSON data, except to indicate that infinite 
       // scrolling can be used 
       params.page = params.page || 1; 

       return { 
        results: $.map(data, function (item) 
        { 
         return { 
          id: item.id, 
          text: item.name 
         } 
        }) 
       }; 
      }, 
      cache: true 
     }, 
     escapeMarkup: function (markup) { return markup; }, // let our custom formatter work 
     minimumInputLength: 3 
    } 
) 

次のようにそれが生成するHTMLがある添付のスクリーンショットに

を参照してください：

<div class="row"> 
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
     <div class="form-group"> 
      <label class="control-label">Student</label> 
      <select class="form-control select2-hidden-accessible" name="student_id" id="student" style="width: 100%;" tabindex="-1" aria-hidden="true">    
      <!-- /.form-group --> 
      <!-- /.col-lg-12 --> 
      <!-- /.row --> 
      Firstname 
      </select> 
      <span class="select2 select2-container select2-container--default" dir="ltr" style="width: 100%;"> 
       <span class="selection"> 
        <span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-student-container"> 
         <span class="select2-selection__rendered" id="select2-student-container"> 
          <span class="select2-selection__placeholder">Search For A Student</span> 
         </span> 
         <span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span> 
        </span> 
       </span> 
       <span class="dropdown-wrapper" aria-hidden="true"></span> 
      </span> 
      <input name="firstname" value="" class="form-control form__input" placeholder="First Name" data-error="Please enter a first name" required=""> 
      <span class="glyphicon form-control-feedback" aria-hidden="true"></span> 
      <div class="help-block with-errors"></div> 
     </div><!-- /.form-group --> 
    </div><!-- /.col-lg-12 --> 
</div> 

誰もがこのための修正を知っていますか？あるいは、過去に同様の問題に遭遇しましたか？

おかげ

Answer 1

あなたがHTMLマークアップでは、学生のためのあなたのselectボックスを閉じていないことを、私はそれをテストしていませんでしたが、私は見ました。たぶんこれが役立ちます。

<select class="form-control" name="student_id" id="student" style="width: 100%;"></select>