Jquery second drop down depending on the first drop down does not change

Question

Hi I have the problem of filtering the second drop down that depends on the first drop down,It is like the second drop down options they are static they does not do change based on what i have chosen here is my code to get secon drop down data.

   $.ajax({
        dataType: "json",
        url: "{{action('CampaignController@getAdvertiser')}}/"+$("#advertiserId").val()

    }).done(function(results){
        $("#brandId").empty();
        $(results).each(function(index,value){                          

             newOption = $("<option value=\""+value.id+"\">"+value.brandName+"</option>");
             $("#brandId").append(newOption);



        }); 

please check my entire script maybe somewhere is refreshing that drop down

    $(document).ready(function () {
        $(function () {
            $("#multiselect").multiselect({
                includeSelectAllOption: true
            });
            $('#btnSelected').click(function () {
                var selected = $("#multiselect option:selected");
                var message = "";
                selected.each(function () {
                    message += $(this).text() + " " + "\n";
                });
                alert(message);
            });
        });

        function loadBrands() {

            $.ajax({
                dataType: "json",
                url: "{{action('CampaignController@getAdvertiser')}}/" + $("#advertiserId").val()
            }).done(function (results) {
                $("#brandId").empty();

                $.each(results, function (index, value) {

                    var newOption = $("<option value=\"" + value.id + "\">" + value.brandName + "</option>");
                    $("#brandId").append(newOption);
                    // $("#brandId").trigger("chosen:updated");
                });
                //$("#brandId").empty();
                // hardcode 1 it must be remove asap
                $.ajax({
                    dataType: "json",
                    url: "{{action('ReportingController@getCamp')}}/" + 1
                }).done(function (results) {
                    $("#campaignId").empty();
                    console.debug(get);
                    $(results).each(function (index, value) {

                        $("#campaignId").append("<option value=\"" + value.campaignId + "\">" + value.campaignName + "</option>");
                        $('#campaignId').trigger('change');
                    });
                });
                //loading city
                $.ajax({
                    dataType: "json",
                    url: "{{action('CampaignLocationController@getLocations')}}/" + 1
                }).done(function (results) {
                    $("#city").empty();

                    $(results).each(function (index, value) {
                        getCityDetails = value.data[0];

                        $("#city").append("<option value=\"" + getCityDetails.brandId + "\">" + getCityDetails.city + "</option>");
                        $('#city').trigger('change');
                    });
                });

            }).fail(function (results) {
                alert("Failed to load brands.");
            });
        }
        loadBrands();
        $("#advertiserId").change(loadBrands);
        $("#brandId").change(loadBrands);


    });

Answer 1

$(results).each(

Is used to iterate the Nodelist in jQuery.

For data manipulation, you must use $.each(results) instead.

$.each(results, function(index,value){                          

            var newOption = $("<option value=\""+value.id+"\">"+value.brandName+"</option>");
             $("#brandId").append(newOption);
            // $("#brandId").trigger("chosen:updated");


        }); 

Instead of appending in each iteration, you can push to an array and then append it at last.

var options = [];
$.each(results, function(index,value){                          
   options.push('<option value="'+value.id+'">'+value.brandName+'</option>');  
}); 
$("#brandId").html(options.join());

Also You've missed var keyword while defining newOption so it will be global

Answer 2

$(document).ready(function() {
$(function () {
$("#multiselect").multiselect({
    includeSelectAllOption: true
});
$('#btnSelected').click(function () {
    var selected = $("#multiselect option:selected");
    var message = "";
    selected.each(function () {
        message += $(this).text() + " " + "\n";
    });
    alert(message);
});
 });

  function loadBrands(){

$.ajax({
    dataType: "json",
    url: "{{action('CampaignController@getAdvertiser')}}/"+$("#advertiserId").val()
}).done(function(results){
    $("#brandId").empty();

    $.each(results, function(index,value){                          

        var newOption = $("<option value=\""+value.id+"\">"+value.brandName+"</option>");
        $("#brandId").append(newOption);
        // $("#brandId").trigger("chosen:updated");
    }); 
    //$("#brandId").empty();
    // hardcode 1 it must be remove asap
    $.ajax({
        dataType: "json",
        url: "{{action('ReportingController@getCamp')}}/"+1
    }).done(function(results){
        $("#campaignId").empty();
        console.debug(get);
        $(results).each(function(index,value){

            $("#campaignId").append("<option value=\""+value.campaignId+"\">"+value.campaignName+"</option>");
            $('#campaignId').trigger('change'); 
            });
    });
    //loading city
    $.ajax({
        dataType: "json",
        url: "{{action('CampaignLocationController@getLocations')}}/"+1
    }).done(function(results){
        $("#city").empty();

        $(results).each(function(index,value){
             getCityDetails  = value.data[0];

            $("#city").append("<option value=\""+getCityDetails.brandId+"\">"+getCityDetails.city+"</option>");
            $('#city').trigger('change');   
            });
    });

}).fail(function(results){
    alert("Failed to load brands.");
});
 }
 loadBrands();
 $("#advertiserId").change(loadBrands);  
 $("#brandId").change(loadBrands); removed this line now it is working