Dealing with duplicate entries in a dropdown menu when receiving a JavaScript AJAX response

Question

Dealing with duplicate entries in a dropdown menu when receiving a JavaScript AJAX response

I am attempting to display multiple selected values in a dropdown list that are coming from a database. The contents of my dropdown list are dependent on another dropdown list.

Here is the JS code I am using:

var cityName = <?= json_encode($cityName); ?>;
var area_name = document.getElementById('area_name').value;
$.ajax({
  'url': '<?= base_url('utility/cityByArea'); ?>',
  'type': 'POST',
  'dataType': 'JSON',
  'data': {
    area_name : area_name
  },
  success: function(response) {
    $('#city_name').find('option').not(':first').remove();
    $.each(response, function(index, data) {
      for(var i = 0; i < cityName.length; i++) {
        $('#city_name').append('<option value="' +data['city_id_primary']+ '" ' +(cityName[i] == data['city_id_primary'] ? 'selected' : '')+ '>' +data['city_name']+ '</option>');
      }
    });
  }
});

Although I am able to get the correct selected values in the dropdown list, the values are being repeated.

To retrieve the database value, I am using PHP CodeIgniter code

var cityName = <?= json_encode($cityName); ?>;

which stores the values in an array.

https://i.sstatic.net/f6UfL.png

Displayed above is the output of console.log(cityName);.

https://i.sstatic.net/eeoGX.png

I am successfully displaying the output in the dropdown list.

However, I need assistance in showing single values only.

I would appreciate any kind of help. Thank you in advance.

javascript ajax codeigniter-3

Answer 1

Answer №1

Your current code is causing each city to be outputted cityName.length times because you are appending the operation inside both loops.

If you want to select multiple options based on the cities in the cityName list, separate the matching logic from the option appending logic.

The approach is straightforward:

success: function(response) {
    $('#city_name').find('option').not(':first').remove();

    // loop through each possible option
    $.each(response, function(index, data) {
      var selected = false; // boolean variable to check if the option value matches any existing city

      // loop through existing cities
      for(var i = 0; i < cityName.length; i++) {
        if (cityName[i] == data['city_id_primary']) {
          selected = true; // we found a match
          break; // exit the loop since a match was found
        }
      }

      // append the option to the dropdown only once and set its selected attribute based on the "selected" boolean.
      $('#city_name').append('<option value="' +data['city_id_primary']+ '" ' +(selected === true ? 'selected' : '')+ '>' +data['city_name']+ '</option>');
    });
  }

P.S. There may be a more concise way to write this using jQuery array functions, but this version is easier to comprehend.

Answer 2

Your current code is causing each city to be outputted cityName.length times because you are appending the operation inside both loops.

If you want to select multiple options based on the cities in the cityName list, separate the matching logic from the option appending logic.

The approach is straightforward:

success: function(response) {
    $('#city_name').find('option').not(':first').remove();

    // loop through each possible option
    $.each(response, function(index, data) {
      var selected = false; // boolean variable to check if the option value matches any existing city

      // loop through existing cities
      for(var i = 0; i < cityName.length; i++) {
        if (cityName[i] == data['city_id_primary']) {
          selected = true; // we found a match
          break; // exit the loop since a match was found
        }
      }

      // append the option to the dropdown only once and set its selected attribute based on the "selected" boolean.
      $('#city_name').append('<option value="' +data['city_id_primary']+ '" ' +(selected === true ? 'selected' : '')+ '>' +data['city_name']+ '</option>');
    });
  }

P.S. There may be a more concise way to write this using jQuery array functions, but this version is easier to comprehend.

Answer 3

Answer №2

Revise the logic for two functions:

for (var i = 0; i < cityName.length; i++) {
    $.each(response, function (index, data) {
        $('#city_name').append('<option value="' + data['city_id_primary'] + '" ' + (cityName[i] == data['city_id_primary'] ? ' selected ' : '') + '>' + data['city_name'] + '</option>');
    });
}

Answer 4

Revise the logic for two functions:

for (var i = 0; i < cityName.length; i++) {
    $.each(response, function (index, data) {
        $('#city_name').append('<option value="' + data['city_id_primary'] + '" ' + (cityName[i] == data['city_id_primary'] ? ' selected ' : '') + '>' + data['city_name'] + '</option>');
    });
}

Dealing with duplicate entries in a dropdown menu when receiving a JavaScript AJAX response

Answer №1

Answer №2

Similar questions

Choose an element that has been generated dynamically using jQuery

Enhancing Donut Chart with d3.js

Using JavaScript and jQuery to make calls to the Web API

Tips for enhancing the width of the extrude shape in the x and z axes using Three.js

Transferring information among various instances of a single controller (ng-controller)

Is there a way to customize the appearance of an unordered list by setting it to display as an image instead of default bullets? I want to

regenerate access credentials using extjs

What is the reason for NextJS/React showing the message "You probably didn't export your component from the file where it was declared"?

What is the proper way to implement parameters and dependency injection within a service?

Angular 8's array verification feature lacks the ability to recognize preexisting elements

The hyperlink in the mobile version of the mega menu is unresponsive in HTML

Displaying JSON data in an HTML table cell format

Learn how to efficiently disable or enable a button in Angular depending on the selected radio button

Why is my event.target.value not updating correctly in React useState?

Is your Angular2 form page experiencing reloading issues?

Switch up the like button for users who have previously liked a post

There are no headers present in the response from apollo-client

produce in the element that is invoked within an each function

retrieve the most recent file following a $group operation

AJAX call not being executed by the script