[jquery] 부트 스트랩에서 selectpicker 플러그인을 사용하여 선택시 선택한 값을 설정하는 방법

Program / 글쓴이

다음 과 같이 Bootstrap-Select 플러그인을 사용하고 있습니다 .

HTML :

<select name="selValue" class="selectpicker">
   <option value="1">Val 1</option>
   <option value="2">Val 2</option>
   <option value="3">Val 3</option>
   <option value="4">Val 4</option>
</select>

자바 스크립트 :

$('select[name=selValue]').selectpicker();

이제 버튼을 클릭했을 때 선택한 값을이 선택으로 설정하고 싶습니다.

$('#mybutton').click(function(){
   $('select[name=selValue]').val(1);
});

하지만 아무 일도 일어나지 않습니다.

이것을 어떻게 할 수 있습니까?

답변

값이 올바르게 선택되었지만 플러그인이 실제 선택을 숨기고 순서가 지정되지 않은 목록이있는 버튼을 표시하기 때문에 표시되지 않았으므로 사용자가 선택에서 선택한 값을 보도록하려면 다음과 같이 할 수 있습니다. :

//Get the text using the value of select
var text = $("select[name=selValue] option[value='1']").text();
//We need to show the text inside the span that the plugin show
$('.bootstrap-select .filter-option').text(text);
//Check the selected attribute for the real select
$('select[name=selValue]').val(1);

편집하다:

@blushrt가 지적한 것처럼 더 나은 해결책은 다음과 같습니다.

$('select[name=selValue]').val(1);
$('.selectpicker').selectpicker('refresh')

편집 2 :

여러 값을 선택하려면 값을 배열로 전달하십시오.

답변

$('select[name=selValue]').val(1);
$('.selectpicker').selectpicker('refresh');

이것이 당신이해야 할 전부입니다. 생성 된 selectpicker의 html을 직접 변경할 필요없이 숨겨진 선택 필드를 변경 한 다음 selectpicker ( ‘refresh’)를 호출하면됩니다.

답변

$('.selectpicker').selectpicker('val', YOUR_VALUE);

답변

값을 설정하는 데 “val”매개 변수를 사용하는 경우 새로 고칠 필요가 없습니다 . fiddle을 참조하십시오 . 선택한 여러 값을 활성화하려면 값에 대괄호를 사용합니다.

$('.selectpicker').selectpicker('val', [1]);

답변

$('#mybutton').click(function(){
   $('select[name=selValue]').val(1);
   $('select[name=selValue]').change();
});

이것은 나를 위해 일했습니다.

답변

실제로 값이 설정되었지만 선택 선택기가 새로 고쳐지지 않았습니다.

문서 https://silviomoreto.github.io/bootstrap-select/methods/#selectpickerval 에서 읽을 수 있습니다.

이를 수행하는 올바른 방법은

$('.selectpicker').selectpicker('val', 1);

여러 값의 경우 값 배열을 추가 할 수 있습니다.

$('.selectpicker').selectpicker('val', [1 , 2]);

답변

요소에서 val 메서드를 호출하여 선택한 값을 설정할 수 있습니다.

$('.selectpicker').selectpicker('val', 'Mustard');
$('.selectpicker').selectpicker('val', ['Mustard','Relish']);

이것은 다중 선택의 모든 항목을 선택합니다.

$('.selectpicker').selectpicker('selectAll');

자세한 내용은 다음 사이트에서 확인할 수 있습니다 : https://silviomoreto.github.io/bootstrap-select/methods/