изберете опция, която току-що беше добавена с 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 да намери всеки елемент на опцията в #mySelectElement, който няма класа 'interactable'.
След това го деактивира: .attr("disabled","disabled");

Изпробвайте го: jsBin

Редактиране:

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

Изпробвайте

person funerr    schedule 09.02.2013
comment
о, добре, това прави нещо. но не е необходимо да деактивирам опциите си, те трябва да се използват по-късно. по-скоро трябва да избера нещо като стойност по подразбиране. РЕДАКТИРАНЕ: и между другото. всички стари опции се премахват напълно, добавят се само нови опции. - 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