Ik maak een jQuerygekozen vervolgkeuzelijst als volgt:
$('.blah').chosen();
Ik kan niet vinden hoe ik opties kan toevoegen, bijvoorbeeld:
$('.blah').chosen('add', name, value);
Antwoord 1, autoriteit 100%
Eerst moet je de <option>
s toevoegen aan de <select>
waaraan Chosen gebonden was. Bijvoorbeeld:
$('.blah').append('<option value="foo">Bar</option>');
Vervolgens moet u de gebeurtenis chosen:updated
activeren:
$('.blah').trigger("chosen:updated");
Meer informatie vindt u hier(hoewel u naar beneden moet scrollen om Change / Update Events
).
Update 7 augustus 2013
De naam van het evenement is veranderd in chosen:updated
sinds versie 1.0 (juli 2013), zoals Tony vermeldt in de opmerkingen. De bijgewerkte documentatie is hierte vinden.
Antwoord 2, autoriteit 32%
nieuwst gekozen versie heeft de naam van het evenement gewijzigd in “chosen:updated”
dus uw code ziet er als volgt uit:
$('.blah').append("<option value='"+key+"'>"+value+"</option>");
$('.blah').val(key); // if you want it to be automatically selected
$('.blah').trigger("chosen:updated");
Antwoord 3, autoriteit 2%
Je kunt deze functie aanroepen om een element toe te voegen aan het gekozen element nadat je het element op de server hebt opgeslagen met Ajax:
function appendToChosen(id,value){
$('.blah')
.append($('<option></option>')
.val(id)
.attr('selected', 'selected')
.html(value)).trigger('liszt:updated');
}
Ajax-oproep:
$.ajax({
type: 'POST',
url: 'savepage.php',
data: $('#modal-form form').serialize(),
success: function(data, status) {
appendToChosen(data[0],data[1]);
},
error: function (response) {
alert(response);
}
}).always(function(data, status) {
//hide loading
});
Antwoord 4
Probeer dit..
$.ajax({
url: "@Url.Action("Actionname", "Controller")",
data: { id: id },
dataType: "json",
type: "POST",
success: function (data) {
$("#id_chzn .chzn-results").children().remove();
var opts = $('#id')[0].options;
$.map(data, function (item) {
var text = item.text;
for (var i = 0; i < opts.length ; i++) {
var option = opts[i];
var comparetext = option.innerText;
var val = 0;
if(text == comparetext)
{
val = option.index;
$('#id_chzn .chzn-results').append("<li id='id_chzn" + val + "' class='active-result' style>" + item.text + "</li>");
}
}
});
}
});
Antwoord 5
Ik heb onderstaande code gebruikt om gekozen dropdown-opties dynamisch bij te werken en het werkt:
var myDropDownOptionHtml ='<option value="0">--Customer--</option>';
$('#myDropdownId').html(myDropDownOptionHtml );
setTimeout(function() {
$("#myDropdownId").trigger("liszt:updated");
},100);
FYI, ik gebruik jQuery gekozen versie 0.13.0
Happy Codering!