传值到界面，生成一个下拉框

得到一个装港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">
" +
                        "                <option value="">please select loadingPortId or portId</option>
" +
                        "                <option value=""+portId+"">portId:&nbsp;&nbsp;"+portId+"</option>
" +
                        "                </select>"
                    );
                }else{
                    $("#portParentId").append(
                        "<select class="form-control" id="portId">
" +
                        "                <option value="">please select loadingPortId or portId</option>
" +
                        "                <option value=""+loadingPortId+"">loadingPortId:&nbsp;&nbsp;"+loadingPortId+"</option>
" +
                        "                <option value=""+portId+"">portId:&nbsp;&nbsp;"+portId+"</option>
" +
                        "                </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;">
" +
                            "							<div class="panel-heading">
" +
                            "								<i class="icon-list"></i>Actual information
" +
                            "								<!--  <span class="ml30"><a class="btn btn-sm btn-success js-select-model" id="addRepairContent1">Add</a></span>-->
" +
                            "							</div>
" +
                            "						</div>
" +
                            "						<div class="divws">
" +
                            "							<table id="mytableo" class="table table-bordered table-hover">
" +
                            "								<thead>
" +
                            "								<tr>
" +
                            "									<th>seq</th>
" +
                            "									<th>voyage_id</th>
" +
                            "									<th>voyage_goods_subid</th>
" +
                            "									<th>port_id</th>
" +
                            "									<th>material_id</th>
" +
                            "									<th>fact_quantity</th>
" +
                            "									<th>operation</th>
" +
                            "								</tr>
" +
                            "								</thead>
" +
                            "								<tbody class="itemo">
" +
                            "								</tbody>
" +
                            "							</table>
" +
                            "						</div>
" +
                            "					      <div class="mytable-page-navs"></div>
" +
                            "					      <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();
                    }
                });