$("#add_city_btn2").click(function() {
var city = $("#add_city2").val();
$("#cities2").append($("<option>", { text: city, selected: "selected"})).change();
$("#add_city2").val('');
return false;
});
What does the line below this code mean? I did not understand mainly the part in braces.
$("#cities2").append($("<option>", { text: city, selected: "selected"})).change();
A new option is created with the text (description), which is contained in the city variable and is marked as selected option selected.
{ text: city, selected: "selected"}
This line does 4 things:
cities2
This is the basic functionality of jQuery, selecting elements from the DOM, meste if probably <select id="cities2"> . The native JavaScript equivalent would be
document.getElementById('cities2');
option
$("<option>", { text: city, selected: "selected"}) creates a new element that stays in HTML with this look:
<option selected="selected"><o valor da variavel city></option>
.append()
Here jQuery inserts this new element at the end of the <select> descendants. The native equivalent is .appendChild() .
change
This previous code (in # 1, # 2, and # 3) changes the selected option to select. However since this is done programmatically and not by user interaction it is necessary to trigger the change event to other parts of the code that are waiting to run when the select has been changed.