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

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

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>

Javascript:

$('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을 직접 변경할 필요 없이 숨겨진 select 필드를 변경한 다음 selectpicker를 호출합니다('새로 고침').

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

값 설정에 "val" 매개 변수를 사용하는 경우 새로 고침이 필요하지 않습니다. 피들을 참조하십시오.여러 개의 선택된 값을 활성화하려면 값에 괄호를 사용합니다.

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

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

이것은 저에게 효과가 있었습니다.

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

설명서에서 볼 수 있듯이
https://silviomoreto.github.io/bootstrap-select/methods/ #피커벌

이를 위한 올바른 방법은 다음과 같습니다.

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

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

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

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

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

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

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

다중 선택 항목의 모든 항목이 선택됩니다.

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

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

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

부트스트랩 선택 선택기를 사용할 때는 이 옵션을 사용하여 선택한 옵션의 값을 얻어야 합니다.

$('#membershipadmin').selectpicker("option:selected").val();

옵션(예: 1, 2, 3, 4 등)에 대해 "하드 코딩" 값이 없는 경우에 대한 blushrt의 답변의 약간 변형입니다.

예를 들어 다음을 렌더링합니다.<select>옵션 값이 일부 사용자의 GUID입니다.그런 다음 옵션을 설정하려면 옵션의 값을 어떻게든 추출해야 합니다.<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');

다중 키워드가 있는 선택에서 사용했습니다.<select multiple>이 경우 기본값으로 선택된 항목은 없지만 첫 번째 항목은 항상 선택되기를 원했습니다.

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

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

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

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

또한, 당신은 이것을 다중 가치를 위해 부를 수 있습니다.

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

여기에서 더 많은 정보를 찾을 수 있습니다. https://developer.snapappointments.com/bootstrap-select/methods/

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

Just put option: 부트스트랩 선택 선택 선택기가 다른 방식으로 변경되고 표시되므로 값을 얻기 위해 선택합니다.그러나 선택된 위치에서 여전히 선택

매번 완벽하게 작동한 것은 다음과 같습니다(Bootstrap 3.4.1).

   $("#myDropDown").val(MyDropDownValue).change();

다음과 같이:

   $("#ddlSalutations").val(data.SalutationID).change();

브라우저에 항상 다음 오류가 표시되므로 여기에 게시된 방법 중 어떤 것도 작동하지 않습니다(더 이상 작동하지 않습니다.그 이후로 뭔가가 변한 게 분명해요.

Uncaught TypeError: $(...).selectpicker is not a function

이것이 이것에 열광하는 다른 사람들에게 도움이 되기를 바랍니다.

이렇게 하면 트리거되지 않습니다.onChange선택기 요소(있는 경우):

$(element).val(myVal)
$(element).selectpicker('refresh')

변경 시에도 트리거되는 경우:

$(element).val(myVal)
$(element).selectpicker('refresh').trigger('change') // also trigger 'change'

이러한 솔루션 중 단 하나도 도움이 되지 않았습니다.나의 경우, 나는 boostrap 5.x와 v1.14.x의 boostrap-select를 사용하고 있었습니다.

다른 사람에게 도움이 될 경우 부트스트랩을 선택하기 전에 jquery가 로드되었는지 확인하는 것이 해결책이었습니다.그것이 끝나면, 이것은 작동합니다.

$('#sel_control').selectpicker('val','1010');

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

선택하려는 항목의 값이 '0'인 경우

또 다른 방법은, 이 키워드를 사용하여, 단순히 개체를 여기에 넣고 그 값을 조작할 수 있다는 것입니다.예:

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

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

잘 작동합니다.

그렇지만

var variable = '2' 

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

부트스트랩 5에서 작동하지 않습니다.BS 4에서는 작동합니다.

다른 옵션 앞에 옵션을 추가하면 자동으로 추가됩니다.

<select name="class" class="form-control selectpicker" data-live-search="true">
   <option value="" selected>I am default selected text</option>
   <option value="9a">9A</option>
   <option value="9b">9B</option>
</select>

참고: 빈 옵션은 고려되지 않으며 플러그인에서 선택한 항목이 없습니다.라고 표시됩니다.

사용자 ID 요소의 경우

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

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

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

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