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

다음 과 같이 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/

$('selector').selectpicker('val',value);

선택기 대신 선택기 클래스 또는 ID를 제공 할 수 있습니다. 예를 들면 다음과 같습니다. $('#mySelect').selectpicker('val',your_value)

var bar= $(#foo).find("option:selected").val();

Blushrt의 약간의 변형옵션 (예 : 1, 2, 3, 4 등)에 대해 "하드 코딩 된"값이 없을 때 답변을 .

<select>옵션 값을 일부 사용자의 GUID로 렌더링한다고 가정 해 보겠습니다 . 그런 다음 .NET에서 설정하기 위해 옵션 값을 추출해야합니다 <select>.

다음에서 우리는 선택의 첫 번째 옵션을 선택합니다.

HTML :

<select name="selValue" class="selectpicker">
   <option value="CD23E546-9BD8-40FD-BD9A-3E2CBAD81A39">Dennis</option>
   <option value="4DDCC643-0DE2-4B78-8393-33A716E3AFF4">Robert</option>
   <option value="D3017807-86E2-4E56-9F28-961202FFF095">George</option>
   <option value="991C2782-971E-41F8-B532-32E005F6A349">Ivanhoe</option>
</select>

자바 스크립트 :

// Initialize the select picker.
$('select[name=selValue]').selectpicker();

// Extract the value of the first option.
var sVal = $('select[name=selValue] option:first').val();

// Set the "selected" value of the <select>.
$('select[name=selValue]').val(sVal);

// Force a refresh.
$('select[name=selValue]').selectpicker('refresh');

여러 키워드를 사용하여 선택에 사용했습니다 <select multiple>. 이 경우 기본적으로 아무것도 선택되지 않았지만 항상 첫 번째 항목이 선택되기를 원했습니다.

@blushrt의 훌륭한 답변을 바탕으로이 답변을 업데이트하겠습니다. 그냥 사용-

$("#Select_ID").val(id);

선택기에 필요한 모든 것을 미리로드 한 경우 작동합니다.

$('.selectpicker').selectpicker("val", "value");

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

'0'은 선택하려는 항목의 값입니다.

잘 할 수있는 또 다른 방법으로, 인 이 키워드, 당신은 단순히에서 개체를 얻을 수있는 이 그것의 값을 조작 할 수 있습니다. 예 :

$("select[name=selValue]").click(
    function() {
        $(this).val(1);
    });

또한 다중 값에 대해 이것을 호출 할 수 있습니다.

$(<your select picker>).selectpicker("val", ["value1", "value2"])

https://developer.snapappointments.com/bootstrap-select/methods/에서 자세한 내용을 찾을 수 있습니다.

$('.selectpicker option:selected').val();

부트 스트랩 선택기 (bootstrap selectpicker)가 다른 방식으로 바뀌고 나타나기 때문에 option : selected를 넣어 값을 얻으십시오. 하지만 여전히 거기 선택

사용자 ID 요소의 경우

document.getElementById('selValue').value=Your Value;
$('#selValue').selectpicker('refresh');

이것을 사용하면 작동합니다.

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