Question

我正在使用PHP Codeigniter，jQuery 2.0.3。

我有一个包含文本框和html表的表单。 html表中的两列是casaded dropdown。

级联下拉列表，比方说，下拉A和下拉列表B，默认情况下，下拉列表A将列出10个选项，它是一个项目类别。虽然下拉列表B没有列出任何内容。当A被更改时，B将填充与下拉列表A（其类别）相关的一些选项，并在

中完成

$(document).on("change","select[name^='ast_group']",function()

下方。

当我从复选框中选择一个值并单击该页面上的一个按钮时，它将运行一个JS函数通过ajax从MySQL中提取数据并将其放在我的表单中＆gt;输入元素，还有HTML表格。（但数据库只有下拉列表B的值，而不是下拉列表A）。

第一个JS函数运行是dialog_purchase_request_pull_data（data_purchase_request）; 此函数内的ajax请求在成功时调用JS函数insert_detail（result）。

在insert_detail函数内部，for循环调用另一个函数add_row（tableID，data_ajax）; 在这个add_row函数中，我调用ajax来获取下拉列表A的值。

我已经获得了下拉列表A的值，但是我想念一些东西，所以我不能直接说出来。 在这一行：

$("#ast_group"+name_cnt).val(obj[0].group_parent_id).change();

我更改了下拉列表A的选项，并触发“更改”事件，以便下拉列表B将填充相关选项。这是我无法找到放置位置的地方：$("#ast_sub_group"+name_cnt).val(data_ajax.item_group); 因此，在触发“更改”事件后，它将更新下拉列表B选项。

这是我的JS：

<script>
//populate sub group if group changed
$(document).ready(function(){   
    $(document).on("change","select[name^='ast_group']",function(){             
        var name_str = $(this).attr('id');
        var name_len = name_str.length;
        var name_cnt = name_str.substring(name_len-1,name_len); 
        $.ajax({
            url:"../asset/ajax_get_sub_group/"+$(this).val(),
            success: function(result){              
                    var detail_result = JSON.parse(result);         
                    $("select[id^='ast_sub_group"+name_cnt+"']").find('option').remove();   
                    $("select[id^='ast_sub_group"+name_cnt+"']").append("<option value='-1'>Select..</option>");
                    for (var i =0; i <detail_result.length;i++){
                        $("select[id^='ast_sub_group"+name_cnt+"']").append("<option value='"+detail_result[i].group_id+"'>"+detail_result[i].group_name+"</option>");
                    }
            }
        });     
    }); 
});
</script>
<script>
function add_row(tableID,data_ajax){
    var name_str = $('#'+tableID+' > tbody > tr:last > td:eq(1) select').attr('id');
    if(typeof(name_str)=="undefined"){
        name_str = "ast_group0";
    }
    var name_len = name_str.length; 
    var name_cnt = parseInt(name_str.substring("ast_group".length,name_len)) +  1;
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    //select init
    var ast_group = '<?php echo sw_CreateSelect('ast_group',$ddl_asset_group,'group_id','group_name',NULL,array('initialvalue'=>'-1','initialdisplay'=>'Select..'));?>';
    var ast_group_buffer = $(ast_group);ast_group_buffer.attr('name','ast_group[]');ast_group_buffer.attr('id','ast_group'+name_cnt);
    var ast_sub_group = '<?php echo sw_CreateSelect('ast_sub_group',$ddl_asset_sub_group,'group_id','group_name',NULL,array('initialvalue'=>'-1','initialdisplay'=>'Select..'));?>';
    var ast_sub_group_buffer = $(ast_sub_group);ast_sub_group_buffer.attr('name','ast_sub_group[]');ast_sub_group_buffer.attr('id','ast_sub_group'+name_cnt);

    var del_link = '<i class="fa fa-ban del_row"></i>&nbsp;&nbsp;';
    var newRow = 
    "<tr height='30px'>"+
        "<td align='center'>"+del_link+"<span>"+rowCount+"</span>"+"</td>"+
        "<td>"+ast_group_buffer.get(0).outerHTML+"</td>"+
        "<td>"+ast_sub_group_buffer.get(0).outerHTML+"</td>"+
        "<td><input type='text' name='ast_name[]' id='ast_name"+name_cnt+"' class='form-control' value='"+data_ajax.item_name+"'></td>"+
        "<td><input type='number' name='ast_qty[]' id='ast_qty"+name_cnt+"' class='form-control' value='"+data_ajax.item_qty+"'></td>"+
        "<td><input type='text' name='ast_price[]' id='ast_price"+name_cnt+"' class='form-control' value='"+data_ajax.item_price+"'></td>"+
        "<td><input type='text' name='sub_total[]' id='sub_total"+name_cnt+"' class='form-control' value='"+data_ajax.item_total+"'readonly></td>"+
    "</tr>";
    //select option 
    if($('#'+tableID+' > tbody > tr').length == 0){
        $('#'+tableID+' > tbody ').append(newRow);
    }else{
        $('#'+tableID+' > tbody > tr:last').after(newRow);
    }
    var ajax_result = [];
    $.ajax({
        url:"<?php echo base_url('asset/ajax_get_parent_group');?>",
        data: {ajax_group_id:data_ajax.item_group}, 
        dataType: "json"/*,
        success: function(result){          
            //return result;
            //alert(result[0].group_parent_id);
            //$("#ast_group"+name_cnt).val(result[0].group_parent_id).change(); 
        }*/
    }).done(function (obj){
        alert('group change');
        $("#ast_group"+name_cnt).val(obj[0].group_parent_id).change();
        $("#ast_sub_group"+name_cnt).val(data_ajax.item_group);
    /*}).done(function (obj){
        alert('wait group change for sub group');
        $("#ast_sub_group"+name_cnt).val(data_ajax.item_group);*/
    }); 
}

function dialog_purchase_request_pull_data(data_purchase_request){
    $("#doc_ref").val(data_purchase_request['doc_num']);
    $("#request_for").val(data_purchase_request['request_for']);
    $("#request_dept").val(data_purchase_request['request_dept']);
    $("#doc_note").val(data_purchase_request['doc_note']);
    var doc_id = data_purchase_request['doc_id'];
    var data_ajax_raw = $.ajax({
        url:"<?php echo base_url('purchase/ajax_purchase_request');?>",
        data: {purreq:doc_id},
        dataType: "json",
        success: function(result){              
            insert_detail(result);          
        }
    });     
}
function insert_detail(data){
    var tbl = document.getElementById("table_detail");
    var tbl_lastrow = tbl.rows.length -1;
    document.getElementById("table_detail").deleteRow(tbl_lastrow); //delete last row
    var data_ajax = Object();   
    for (var datum in data){
        data_ajax.item_name = data[datum].item_name;
        data_ajax.item_qty = data[datum].item_qty;
        data_ajax.item_price = data[datum].item_price;
        data_ajax.item_total = data[datum].item_total;
        data_ajax.item_group = data[datum].item_group;
        add_row('table_detail',data_ajax);
    }


    /*$("#ast_group1").val(1).change();
    $("#ast_sub_group1").val(24);

    $("#ast_group2").val(4).change();   
    $("#ast_sub_group2").val(101);*/
    addRow("table_detail"); //add empty row
}
</script>

感谢您的帮助。谢谢。 JMS

Answer 1

你试过.done（）方法吗？

$.ajax({
url: "test.html",
context: document.body
}).done(function() {
$( this ).addClass( "done" );
});

Answer 2

这并没有直接解决这个问题，但我相信它作为一个答案而不是一个简单的评论更有价值。

您的设置似乎过于复杂而且不是最佳选择。通过使用可重用的组件（例如select2用于列表），可能实现Ajax搜索功能或在列表A更改上设置列表的B数据，可以极大地降低复杂性。

对于Ajax搜索，只需禁用列表B，直到列表A中选择了某些内容，并使用正确的Ajax设置（即URL参数）配置列表B，并使用列表A中的选定值。

或者您只需从列表A更改事件中设置列表B的值。

你要做的事情是以前做过很多次的事情，但我认为你的方法可能不是最好的方法。

如何在.done（）ajax中的'change'事件后运行jquery？

2 个答案: