Окно выбора обновления JQuery - PullRequest
Новая
       13

Окно выбора обновления JQuery

11 голосов
/ 21 февраля 2012

Я заполняю поле выбора с помощью JQuery при загрузке страницы, используя этот метод 

 $('#select').append('<option value="' + result + '">' + result + '</option>');

Однако это оставляет поле выбора пустым, т. Е. Первое значение в списке опций не выбирается заранее в качестве выбранной опции.

Как мне «обновить» этот список, чтобы предварительно выбрать первое значение?

Извините - надо было сказать, что это был мобильный JQuery до

Спасибо.

Ответы [ 5 ]

21 голосов
/ 21 февраля 2012

Вы можете добавить атрибут «selected» к элементу option, который вы хотите выбрать: 

$('#select')
    .append('<option value="' + result + '" selected="selected">' + result + '</option>');

Вы не указываете, как именно заполняете, выбираете элемент, используя цикл, вы можете сделать так: 

var data = ['a', 'b', 'c'];
var $select = $('#select'); // you might wanna empty it first with .empty()

for (var i = 0; i < data.length; i++) {
    var o = $('<option/>', { value: data[i] })
        .text(data[i])
        .prop('selected', i == 0);
    o.appendTo($select);
}​

DEMO

Похоже, вы используете jQuery Mobile, как вы сказали в комментарии.

Если вы используете selectmenu widget , вам необходимо программно обновить его после внесения программных изменений в его содержимое / структуру: 

$select.selectmenu("refresh", true);

Документация

4 голосов
/ 21 февраля 2012

Вы можете использовать 

$('#select').removeAttr('selected').find('option:first').attr('selected', 'selected');
3 голосов
/ 21 февраля 2012

Просто .. вы устанавливаете значение как хотите, то есть: $('#select').val(5); .. поэтому в вашем случае его $('#select').val(result);

Редактировать: полный рабочий пример включен: 

<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script>
<select id='select'></select>
<br>
<input type=button onclick='addNew()' value='Add'>

<script>
function addNew()
{
        var result = Math.floor(Math.random()*1000);
        $('#select').append('<option value="' + result + '">' + result + '</option>'); 
        $('#select').val(result);           
} 
</script>

1008 *

1 голос
/ 12 сентября 2018

Mohora Bogdan ответ срабатывает только один раз, затем, если вы выберете другой вариант, он больше не будет работать.

Чтобы сделать его многоразовым, используйте: 

$('#select').prop('selected', false).find('option:first').prop('selected', true);
1 голос
/ 21 февраля 2012

Не все обновления браузера выбираются автоматически после добавления новой опции.

Один трюк, который мне подходит, это скрыть и показать окно выбора сразу после добавления новых опций. Итак, в вашем случае: 

 $('#select').append('<option value="' + result + '">' + result + '</option>').hide().show();

Что касается выбора правильной вновь добавленной опции, выполните следующие действия: 

 $('select').val(result);
...