HTML5 Canvas - Populated Combobox with JSON via AJAX - add a Selected option

[FlatChat]

I have populated a combobox with JSON via Query AJAX. I now want to prepend a selected option, like 'Select an option...'. How should I do this?

$.ajax({

url: "scripts/get_patients.php",

dataType: 'json'

}).then(function (data) {

assignDataF(data);

})


function assignDataF(data) {

for (var i = 0; i < data.length; i++) {

$('#patients_cbx').append($("<option/>").attr("value", i).text(data[i].label));

}
}

[Colin Holgate]

The Components panel has Radio Button. Putting down severl of those will make them work as a group.

I don't know the messages that will be triggered, or how you could have two sets of buttons visible at the same time, but hopefully that will get you started.

[kglad · Accepted solution]

function assignDataF(data) {
$('#patients_cbx').append($("<option/>").attr("value", 0).text("Select an option.."));
for (var i = 0; i < data.length; i++) {

$('#patients_cbx').append($("<option/>").attr("value", i+1).text(data[i].label));

}
}

[FlatChat]

@kglad   Thanks!  

Question:  Why does adding the append for the selected option work here inside the JQuery AJAX:

function getPatients(evt) {

	level = evt.target.value;

	root.choose_patient_txt.visible = true;
	root.patients_cbx.visible = true;
	
	if(level == 1){
		levelLabel = 'simple';
	} else if(level == 2){
		levelLabel = 'intermediate';
	} else if(level == 3){
		levelLabel = 'advanced';
	} 

	$.ajax({
		type: "POST",
		url: 'scripts/get_patients.php',
		dataType: 'json',
		data: {
			level: level
		},
		success: function (data) {
			$('#patients_cbx').val('');

			$('#patients_cbx').append($("<option/>").attr("value", 0).text("Select " + levelLabel + " patient..."));
			for (var i = 0; i < data.length; i++) {
				$('#patients_cbx').append($("<option/>").attr("value", data[i].data).text(data[i].label));
			}
		}
	});
}

And not outside of the JQuery AJAX call?

$('#patients_cbx').append($("<option/>").attr("value", 0).text("Select " + levelLabel + " patient..."));


function getPatients(evt) {

	level = evt.target.value;

	root.choose_patient_txt.visible = true;
	root.patients_cbx.visible = true;
	
	if(level == 1){
		levelLabel = 'simple';
	} else if(level == 2){
		levelLabel = 'intermediate';
	} else if(level == 3){
		levelLabel = 'advanced';
	} 

	$.ajax({
		type: "POST",
		url: 'scripts/get_patients.php',
		dataType: 'json',
		data: {
			level: level
		},
		success: function (data) {
			$('#patients_cbx').val('');

			
			for (var i = 0; i < data.length; i++) {
				$('#patients_cbx').append($("<option/>").attr("value", data[i].data).text(data[i].label));
			}
		}
	});
}

As the components are in the DOM, I assume JQuery could be used on any component anywhere in the code if I have JQuery added. 

So if I wanted to do similar for a combobox that already has defined options (through the IDE) I could just add this line anywhere:

$('#level_cbx').append($("<option/>").attr("value", 0).text("Select a level..."));

But it's not working...

[FlatChat]

Also, how would I clear all options from a combobox as I have tried with the following but no success: 

$('#patients_cbx').val('');

[kglad · Accepted solution]

$('#patients_cbx').empty();

[kglad · Accepted solution]

you have to pass "data" or define a variable (eg, dataA) outside the function body.