Question

我有一个动态创建的HTML表。单元格之一是选择标签。我正在尝试显示选项之一，但取而代之的是空白字段。所有选项都有一个下拉菜单。我怀疑我需要在某个地方使用回调，但不确定在哪里或如何实现。

添加了以下表格行：

function ic_add_supplier_line(){
var table = document.getElementById("ic_current_pricing");
var count = $('#ic_current_pricing tr').length;
var row = table.insertRow(count); 
for (i = 0; i < 8; i++) {
   var cell = row.insertCell(i); 
    var cell_id = "ic_q_" + String(i) +"_" + String(count)
    if (i==0) {
      cell.innerHTML = "<select id=" + cell_id + " style='width:100%;' type='text' ondblclick='select_supplier(this.id)' onchange='get_supplier_info(this.value)'  </select>"
      ic_get_supplier_list(cell_id)   
     }else{
        cell.innerHTML = "<input id=" + cell_id + " style='width:100%;' type='text' ondblclick='select_supplier(this.id)'>" 
     }
  }
}

选择标记的选项：

function ic_get_supplier_list(id){
$.ajax({
    type: 'POST',
    // data: JSON.stringify(data),
    contentType: 'application/json',
    url: '/phoebe_drive/ic_suppliers_list',
    success:function(response_data_json) {
        var  suppliers_results = JSON.parse(JSON.stringify(response_data_json));
        // console.log( bids_results)  
        $("select").each(function (){               
            if (this.id ==id){
                var opt = document.createElement('option');
                // opt.value = 'pick';
                opt.innerHTML = '';
                this.appendChild(opt)
                for (i=0; i<suppliers_results.length; i++){
                    opt = document.createElement('option');
                    opt.value = suppliers_results[i].supplier_name;
                    opt.innerHTML = suppliers_results[i].supplier_name;
                    this.appendChild(opt)
                } 
                opt = document.createElement('option');
                opt.innerHTML = '────────────────────';
                opt.disabled=true
                this.appendChild(opt)  
                opt = document.createElement('option');
                opt.value = 'add_new';
                opt.innerHTML = 'Add New Supplier';
                this.appendChild(opt)  
            }                 
        });
    }
  });
}

最后创建并填充表：

function item_card(){ 
//.......

let data = {}
data.item_id= item_id
$.ajax({
    type: 'POST',
    data: JSON.stringify(data),
    contentType: 'application/json',
    url: '/phoebe_drive/item_info',
    success:function(response_data_json) {
        let resp_data = JSON.parse(JSON.stringify(response_data_json));
        let item_data =resp_data['items_info'] 
        let option_value = item_data[r-1].supplier
        $("table").each(function (){               
            if (this.id =="ic_current_pricing"){
                for (r=1; r<=item_data.length; r++){
                    ic_add_supplier_line() 
                    let suppl_field =document.querySelector("#ic_q_0_" + String(r))
                    console.log(suppl_field.options.length)
 //options.length returns zero at this point.
                    for (let i= suppl_field.options.length; i-->0;) {
                        console.log(i, suppl_field.options[i].value )
                        if (suppl_field.options[i].value==item_data[r-1].supplier){
                            console.log(i, suppl_field.options[i].value )
                            suppl_field.selectedIndex= i;
                        }
                    }

                }  
            }                
        });
    },
    error : function () {
            // some error handling part
            // alert("Oops! Something went wrong.");
        }
        });

}

options.length返回0。我猜测此时尚未完成的选项加载。我将不胜感激。预先感谢。

从MySQL数据库动态填充Javascript填充选择标签

0 个答案: