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

부트 스트랩에서 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');

details are available on site : https://silviomoreto.github.io/bootstrap-select/methods/

---

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

---

A slight variation of blushrt's answer for when you do not have "hard coded" values for options (i.e. 1, 2, 3, 4 etc.)

Let's say you render a <select> with options values being GUIDs of some users. Then you will need to somehow extract the value of the option in order to set it on the <select>.

In the following we select the first option of the 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>

Javascript:

// 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');

We used this in a select with the multiple keyword <select multiple>. In this case nothing is selected per default, but we wanted the first item to always be selected.

---

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

With the '0' being the value of the item you want selected

---

Well another way to do it is, with this keyword, you can simply get the object in this and manipulate it's value. Eg :

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

---

Also, you can just call this for multi-value

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

You can find more here https://developer.snapappointments.com/bootstrap-select/methods/

---

Based on @blushrt 's great answer I will update this response. Just using -

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

works if you've preloaded everything you need to the selector.

---

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

Just put option:selected to get value, because the bootstrap selectpicker change to and appear in diferent way. But select still there selected

---

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

---

User ID For element, then

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

---

use this and it's gonna work:

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

참고URL : https://stackoverflow.com/questions/14804253/how-to-set-selected-value-on-select-using-selectpicker-plugin-from-bootstrap