부트스트랩-선택 - 변경 시 이벤트를 발생시키는 방법

부트스트랩-선택 - 변경 시 이벤트를 발생시키는 방법

부트스트랩 3.0.2와 부트스트랩 선택 플러그인을 사용하고 있습니다.

선택 목록은 다음과 같습니다.

<select class="selectpicker" data-live-search="true" data-size="7">
  <option>Petr Karel</option>
  <option>Honza Novák</option>
  <option>David Egydy</option>
  <option>Sláva Kovář</option>
  <option>Hana Skalická</option>
  <option>Simona Kolářová</option>
  <option>Kateřina Sychová</option>
  <option>Amálka Sychová</option>
  <option>Jana Sychová</option>
  <option>Magdaléna Sychová</option>
  <option>Tereza Sychová</option>
  <option>Bohdana Sychová</option>
</select>

여기 제 자바스크립트가 있습니다.

//inicialization of select picker
$('.selectpicker').selectpicker();

//on change function i need to control selected value
$('select.selectpicker').on('change', function(){
   var selected = $('.selectpicker option:selected').val();
   alert(selected);
});

쟁점.

저의 문제는 변경 기능이 작동하지 않는다는 것입니다.그것은 아무 효과도 없고, 저 혼자서는 해결책을 찾을 수 없습니다.

대신 문서 준비에 넣으면 기능을 바꾸면 되는 것 같습니다.그래서 제가 어딘가에서 실수를 한 것 같습니다.

$('select.selectpicker').on('change', function(){

저는 또한 다음과 같은 것만 사용하려고 했습니다.

$('.selectpicker').on('change', function(){

이 선택 접두사가 없지만 아무것도 변경되지 않습니다.

갱신하다

솔루션이 jquery 코드를 입력하고 있습니다.document.ready(). 카르티케야 덕분에

부트스트랩 셀렉트가 초기화되면 오리지널과 함께 실행되는 사용자 정의 디브 세트가 구축됩니다.<select>element 와 는 일반적으로 두 입력 메커니즘 사이의 상태를 동기화합니다.

즉, 부트스트랩 선택에서 이벤트를 처리하는 한 가지 방법은 누가 업데이트했는지에 관계없이 원래 선택에서 수정한 이벤트를 수신하는 것입니다.

솔루션 1 - 기본 이벤트

이벤트를 듣고 javascript 또는 jQuery를 사용하여 다음과 같이 선택된 값을 얻습니다.

$('select').on('change', function(e){
  console.log(this.value,
              this.options[this.selectedIndex].value,
              $(this).find("option:selected").val(),);
});

^{*참고: DOM에 의존하는 모든 스크립트와 마찬가지로, 실행하기 전에 DOM 준비 이벤트를 기다려야 합니다.}

스택 내 데모 스니펫:

$(function() {

  $('select').on('change', function(e){
    console.log(this.value,
                this.options[this.selectedIndex].value,
                $(this).find("option:selected").val(),);
  });
  
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.js"></script>

<select class="selectpicker">
  <option val="Must"> Mustard </option>
  <option val="Cat" > Ketchup </option>
  <option val="Rel" > Relish  </option>
</select>

솔루션 2 - 부트스트랩 사용자 지정 이벤트 선택

이 답변에서 알 수 있듯이 부트스트랩 선택에는 다음과 같은 고유의 사용자 지정 이벤트 세트가 있습니다.changed.bs.select다음 항목:

선택한 값이 변경된 후 발생합니다.이벤트 통과, 클릭색인, 새 값, 이전 값.

이렇게 사용할 수 있습니다.

$("select").on("changed.bs.select", 
      function(e, clickedIndex, newValue, oldValue) {
    console.log(this.value, clickedIndex, newValue, oldValue)
});

스택 내 데모 스니펫:

$(function() {

  $("select").on("changed.bs.select", 
        function(e, clickedIndex, newValue, oldValue) {
      console.log(this.value, clickedIndex, newValue, oldValue)
  });

});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.js"></script>

<select class="selectpicker">
  <option val="Must"> Mustard </option>
  <option val="Cat" > Ketchup </option>
  <option val="Rel" > Relish  </option>
</select>

이게 제가 한 일입니다.

$('.selectpicker').on('changed.bs.select', function (e, clickedIndex, newValue, oldValue) {
    var selected = $(e.currentTarget).val();
});

가장 간단한 해결책은 -

$('.selectpicker').trigger('change');

$("#Id").change(function(){
    var selected = $('#Id option:selected').val();
    alert(selected);           
});

이것이 당신에게 필요한 것 같습니다.

가장 쉬운 구현.

<script>
    $( ".selectpicker" ).change(function() {
        alert( "Handler for .change() called." );
    });
</script>

나의 구현

import $ from 'jquery';

$(document).ready(() => {
  $('#whatDescribesYouSelectInput').on('change', (e) => {
    if (e.target.value === 'Other') {
      $('#whatDescribesYouOtherInput').attr('type', 'text');
      $('#specifyLabel').show();
    } else {
      $('#whatDescribesYouOtherInput').attr('type', 'hidden');
      $('#specifyLabel').hide();
    }
  });
});

언급URL : https://stackoverflow.com/questions/25720986/bootstrap-select-how-to-fire-event-on-change