Skip to main content
F
FlatChat
Inspiring
April 6, 2022
Answered

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

  • April 6, 2022
  • 2 replies
  • 519 views

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));

}
}
    This topic has been closed for replies.
    Correct answer kglad

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

     

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

     

     


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

    2 replies

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    April 6, 2022

     

     

    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));

}
}

     

     

      F
      FlatChatAuthor
      Inspiring
      April 7, 2022

      @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...

      kglad
      Community Expert
      kgladCommunity ExpertCorrect answer
      Community Expert
      April 7, 2022

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

       

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

       

       


      $('#patients_cbx').empty();
        Colin Holgate
        Colin Holgate
        Inspiring
        April 6, 2022

        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.

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices