выберите вариант, который был только что добавлен с помощью jquery

На основе запроса AJAX я добавил некоторые параметры в список.

for(var i = 0; i < options.length; i++) {
    var data = options[i];
    var option = $('<option id="mySelectElementOption_' + data['id'] + '" value="' + data['value'] + '">' + data['value'] + '</option>');
    $('#mySelectElement').append(option);
}

Теперь, когда пользователь взаимодействует со страницей, я хочу выбрать одну из только что добавленных опций, и я попробовал следующее (обе возможности у меня не работают):

$('#mySelectElementOption_' + id).attr('selected', 'selected');

а также

var option = document.getElementById('mySelectElementOption_' + id);
option.selected = true;

Так что я застрял, потому что я не знаю, как выбрать свой вариант. У вас есть идеи (ы), как я могу это решить? Спасибо!

P.S. Когда я пробую второй вариант в Google Chrome, он работает отлично.

Привет, Джозеф


javascript jquery select append option
person miclaus    schedule 09.02.2013    source источник
comment
Попробуйте $('#mySelectElement').val($('#mySelectElementOption_' + id).val());   -  person Musa    schedule 10.02.2013

Ответы (3)


arrow_upward
0
arrow_downward

Используйте prop вместо attr:

$('#mySelectElementOption_' + id).prop('selected', true);

or 

$('#mySelect').val($('#mySelectElementOption_' + id).val());

http://jsfiddle.net/uG88d/

person dmk    schedule 09.02.2013

arrow_upward
0
arrow_downward

Попробуйте следующее:
HTML:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <select id="mySelectElement">
    <option id="oldoption" >Old option</option>
  </select>
</body>
</html>

JS:

//demo data
options = [{id:0, value:"aaa"},{id:1, value:"bbb"},{id:2, value:"ccc"}];

    for(var i = 0; i < options.length; i++) {
        var data = options[i];
        var option = $('<option id="mySelectElementOption_' + data['id'] + '" class="interactable" value="' + data['value'] + '">' + data['value'] + '</option>');
        $('#mySelectElement').append(option);
    }
//This is what you need:
        $("#mySelectElement :not([class])").attr("disabled","disabled");

Объяснение:
$("#mySelectElement :not([class=interactable])") — это говорит jquery найти любой элемент option в #mySelectElement, который не имеет класса «interactable».
Затем он отключает его: .attr("disabled","disabled");

Попробуйте: jsBin

Изменить:

$("#mySelectElement .interactable:first").prop('selected', true);

Попробуйте

person funerr    schedule 09.02.2013
comment
ах ладно это что-то делает. но мне не нужно отключать мои параметры, их нужно использовать позже. мне скорее нужно выбрать что-то вроде значения по умолчанию. EDIT: и кстати. все старые опции удаляются полностью, добавляются только новые опции. - person miclaus; 10.02.2013

arrow_upward

arrow_downward

person    schedule
comment
ну дело в том, что пользователь должен сначала инициировать событие, чтобы потом была выбрана опция. - person miclaus; 10.02.2013
comment
вы можете добавить туда привязку и даже функцию для выполнения по щелчку, а ЗАТЕМ добавить ее. - person sajawikio; 10.02.2013
comment
я имею в виду, что если запрос AJAX выполнен успешно, параметры добавляются к списку. другими словами, запрос AJAX запрашивает параметры для mySelectElement и добавляет их. то пользователь может инициировать событие, например. выберите из другого списка идентификатор, и этот идентификатор соответствует одному из параметров, которые я только что добавил к mySelectElement. - person miclaus; 10.02.2013
comment
хорошо, я думаю, я понял, что вы имели в виду! когда пользователь выбирает идентификатор из другого списка, это снова запускает запрос, но на этот раз я пропускаю идентификатор, который должен быть выбран в случае успеха, в то время как параметры добавляются! :) огромное спасибо! - person miclaus; 10.02.2013