I've created a scripts that makes requests to the server and gets a json response with some data that is used to create dropdown dinamically, in some cases the server returns one single value and, of course, the dropdown generated has only one option (as follow)
<div id="wrap">
<select class="click_me">
<option value="1">foo</option> --> this value comes from a json response.
</select>
</div>
This is my jQuery script (I think that it is self explanatory)
$('#wrap').on('change', 'select', function() {
var container = $('#wrap');
var self = $(this);
self.nextAll().remove();
$.ajax({
type: 'GET',
url: 'server/stuff?id=' + self.val(),
dataType: 'json',
success: function(data) {
if (data) {
var options = self.clone().empty().appendTo(container); //clone current dropdown.
$.each(data, function(key, value) {
$.each(value, function(key, value) {
options.append($("<option />").val(key).text(value)); //fill cloned element with new data
});
});
} else {
console.log('Nothing more');
}
}
});
});
If user gets a dropdown with one option, the script above doesn't work. I think that event onchange is not triggered at all, I tried onclick event but it fires when user just want to open the dropdown.
Please, any advice is appreciate.
Thanks