Як встановити вибране значення для вибору за допомогою плагіну 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>

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

Це все, що вам потрібно зробити. Не потрібно безпосередньо змінювати створений HTML-код Selector, достатньо просто змінити приховане поле вибору, а потім зателефонувати в 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/#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);

замість селектора ви можете дати вам селектор або клас, або ідентифікатор, наприклад: $('#mySelect').selectpicker('val',your_value)

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

Незначна зміна відповіді на русявий випадок, коли у вас немає значень "жорсткого коду" для варіантів (тобто 1, 2, 3, 4 тощо)

Скажімо, ви візуалізуєте a <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);

працює, якщо ви передзавантажили все необхідне для селектора.

$('.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();

Просто поставте параметр: вибрано, щоб отримати значення, оскільки вибір вибору завантажувача зміниться та відобразиться по-різному. Але виберіть все одно вибране

Користувацький ідентифікатор для елемента

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

скористайтеся цим, і це спрацює:

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