Jquery第二次下拉取决于第一次下拉不会改变

时间:2015-04-17 06:57:32

标签: javascript jquery

嗨我有过滤第二次下拉的问题,这取决于第一次下拉,这就像第二次下拉选项,他们是静态的,他们没有做根据我选择的这里改变是我的代码得到secon下拉数据。

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



        }); 

请检查我的整个脚本可能在某个地方刷新了

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


    });

2 个答案:

答案 0 :(得分:0)

$(results).each(

用于在jQuery中迭代Nodelist。

对于数据操作,您必须改为使用$.each(results)

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

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


        }); 

不是在每次迭代中追加,而是可以推送到数组然后最后追加它。

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

此外,您在定义var时错过了newOption关键字,因此它将是全局的

答案 1 :(得分:0)

$(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