得到一個裝港id和卸港id，然後在介面的生成一個下拉框，這個很簡單的。但是不熟練，記一下，下次直接複製。

var portId = obj.children('td').eq(5).html()+"";//卸港id
var loadingPortId = obj.children('td').eq(4).html()+"";//裝港id

卸港id，一般都是有的。所以我只判斷裝港是否為空

$("#portParentId").empty();
                if (loadingPortId ==null || loadingPortId ==""){
                    $("#portParentId").append(
                        "
 
<select class=\"form-control\" id=\"portId\">\n" +
                        "                <option value=\"\">please select loadingPortId or portId</option>\n" +
                        "                <option value=\""+portId+"\">portId:&nbsp;&nbsp;"+portId+"</option>\n" 
 
+
                        "                </select>"
                    );
                }else{
                    $("#portParentId").append(
                        "<select class=\"form-control\" id=\"portId\">\n" +
                        "                <option value=\"\">please 
 
select loadingPortId or portId</option>\n" +
                        "                <option value=\""+loadingPortId+"\">loadingPortId:&nbsp;&nbsp;"+loadingPortId+"</option>\n" +
                        "                <option value=\""+portId+"\">portId:&nbsp;&nbsp;"+portId+"</option>\n" +
                        "                </select>"
                    );
                }

生成之後，還要去選擇裝港id，和卸港id，如果沒有選擇的話呢，就要提示，這個提示，我忘記了，艹等會加上。

選擇裝港id就不生成航次貨物的表格，選擇卸港生成航次貨物的表格。

這就要監聽下拉框了，貼一下js：

$("#portId").change(function () {
                    if ($("#portId option:selected").html().substring(0,6) == "portId" ) {
                        $("#ActualInformation").append(
                            "<div class=\"panel\" style=\"margin-bottom: 0;\">\n" +
                            "\t\t\t\t\t\t\t<div class=\"panel-heading\">\n" +
                            "\t\t\t\t\t\t\t\t<i class=\"icon-list\"></i>Actual information\n" +
                            "\t\t\t\t\t\t\t\t<!--  <span class=\"ml30\"><a class=\"btn btn-sm btn-success js-select-model\" id=\"addRepairContent1\">Add</a></span>-->\n" +
                            "\t\t\t\t\t\t\t</div>\n" +
                            "\t\t\t\t\t\t</div>\n" +
                            "\t\t\t\t\t\t<div class=\"divws\">\n" +
                            "\t\t\t\t\t\t\t<table id=\"mytableo\" class=\"table table-bordered table-hover\">\n" +
                            "\t\t\t\t\t\t\t\t<thead>\n" +
                            "\t\t\t\t\t\t\t\t<tr>\n" +
                            "\t\t\t\t\t\t\t\t\t<th>seq</th>\n" +
                            "\t\t\t\t\t\t\t\t\t<th>voyage_id</th>\n" +
                            "\t\t\t\t\t\t\t\t\t<th>voyage_goods_subid</th>\n" +
                            "\t\t\t\t\t\t\t\t\t<th>port_id</th>\n" +
                            "\t\t\t\t\t\t\t\t\t<th>material_id</th>\n" +
                            "\t\t\t\t\t\t\t\t\t<th>fact_quantity</th>\n" +
                            "\t\t\t\t\t\t\t\t\t<th>operation</th>\n" +
                            "\t\t\t\t\t\t\t\t</tr>\n" +
                            "\t\t\t\t\t\t\t\t</thead>\n" +
                            "\t\t\t\t\t\t\t\t<tbody class=\"itemo\">\n" +
                            "\t\t\t\t\t\t\t\t</tbody>\n" +
                            "\t\t\t\t\t\t\t</table>\n" +
                            "\t\t\t\t\t\t</div>\n" +
                            "\t\t\t\t\t      <div class=\"mytable-page-navs\"></div>\n" +
                            "\t\t\t\t\t      <div class=\"clearfix\"></div>"
                        );
                        var mytable = new DataTable({
                            id:".divws",
                            pageNavId : ".mytable-page-nav1",
                            url:$('body').attr('plmsctx')+"/voyageInformation/detailVoyageGoods",
                            params : {
                                voyageId : voyageId
                            },
                            pageInterval:10,
                            columns : [ {
                                field : "idx",
                                title : "seq",
                                width : "5%",
                                format : function(val, row, i) {
                                    return i + 1;
                                }
                            }, {
                                field : "id",
                                title : "ID",
                                hide : true
                            }, {
                                field : "voyageId",
                                title : "voyage_id"
                            }, {
                                field : "voyageGoodsSubid",
                                title : "voyage_goods_subid"
                            } , {
                                field : "portId",
                                title : "port_id"
                            } , {
                                field : "materialId",
                                title : "material_id"
                            } , {
                                field : "",
                                title : "factQuantity",
                                edit:true
                            }]
                        });
                        mytable.init();
                    }else{
                        $("#ActualInformation").empty();
                    }
                });