Question

从我的数据库加载记录列表以在html网格中显示它们时，我需要放几个＆lt; select＆gt;在几列中。在我的javascript中，我执行ajax调用以json格式接收我的数据并将我的结果推送到数组中。在我的显示功能中，我然后循环数组并构建我的表＆lt; tr＆gt;到一个字符串，然后在＆lt; tbody＆gt;中推送该html字符串我的桌子： if（buildingList）{ buildingList.forEach（function（element）{ buildingListHTML + =＆＃34;＆lt; tr＆gt;＆＃34 ;; buildingListHTML + =＆＃34;＆lt; td＆gt;＆＃34; + element.nID +＆＃34;＆lt; / td＆gt;＆＃34 ;; buildingListHTML + =＆＃34;＆lt; td＆gt;＆＃34; + element.cTaskNumber +＆＃34;＆lt; / td＆gt;＆＃34 ;; buildingListHTML + =＆＃34;＆lt; td＆gt;＆＃34; + element.nProductTypeID +＆＃34;＆lt; / td＆gt;＆＃34 ;; buildingListHTML + =＆＃34;＆lt; td＆gt;＆＃34; + element.nQty +＆＃34;＆lt; / td＆gt;＆＃34 ;; buildingListHTML + =＆＃34;＆lt; td＆gt;＆＃34; + element.dRequired +＆＃34;＆lt; / td＆gt;＆＃34 ;; buildingListHTML + =＆＆＃34;＆lt; td＆gt;＆lt; input type =＆＃39; checkbox＆＃39;＆＃34; +（（element.bCompleted == 0）？＆＃34;＆＃34;：＆＃34; check＆＃34;）+＆＃34;禁用＆GT;＆LT; / TD＆GT;＆＃34 ;; buildingListHTML + =＆＃34;＆lt; / tr＆gt;＆＃34 ;; }）; } $（＆＃34;＃workOrderBuildingListBody＆＃34）。HTML（buildingListHTML）; 那部分效果很好。但是现在，对于我的列nProductTypeID，我想显示一个＆lt; select＆gt;根据我的ID，使用我的产品类型列表，从列表中自动选择正确的产品类型。基本上，我到目前为止所做的是创建一个＆lt; select＆gt;在隐藏的＆lt; div＆gt;中在我的php文件中：＆lt; div id =＆＃34; WOSkuSelectTemplate＆＃34; style =＆＃34; display：none;＆＃34;＆gt; ＆lt; select class =＆＃34; WOSkuSelect＆＃34;＆gt; ＆lt;？php Common :: generateProdTypesOptions（$ db）; ？＆GT; ＆LT; /选择＆GT; ＆LT; / DIV＆GT; 然后，而不仅仅是做＆＃34;＆lt; td＆gt;＆＃34; + element.nProductTypeID +＆＃34;＆lt; / td＆gt;＆＃34;，我试图做这样的事情： if（actionsList）{//如果有动作条目 actionsList.forEach（function（element）{ var WOSkuSelectTemplate = $（＆＃34;＃WOSkuSelectTemplate＆＃34;）。clone（）。html（）; $（WOSkuSelectTemplate）.VAL（element.nProductTypeID）; 警报（WOSkuSelectTemplate）; actionsListHTML + =＆＃34;＆lt; tr＆gt;＆＃34 ;; actionsListHTML + =＆＃34;＆lt; td＆gt;＆＃34; + element.nID +＆＃34;＆lt; / td＆gt;＆＃34 ;; actionsListHTML + =＆＃34;＆lt; td＆gt;＆＃34; + element.cTaskNumber +＆＃34;＆lt; / td＆gt;＆＃34 ;; actionsListHTML + =＆＃34;＆lt; td＆gt;＆＃34; + WOSkuSelectTemplate +＆＃34;＆lt; / td＆gt;＆＃34 ;; actionsListHTML + =＆＃34;＆lt; td＆gt;＆＃34; + element.nQty +＆＃34;＆lt; / td＆gt;＆＃34 ;; actionsListHTML + =＆＃34;＆lt; td＆gt;＆＃34; + element.nActionTypeID +＆＃34;＆lt; / td＆gt;＆＃34 ;; actionsListHTML + =＆＃34;＆lt; td＆gt;＆＃34; + element.cFrom +＆＃34;＆lt; / td＆gt;＆＃34 ;; actionsListHTML + =＆＃34;＆lt; td＆gt;＆＃34; + element.cTo +＆＃34;＆lt; / td＆gt;＆＃34 ;; actionsListHTML + =＆＃34;＆lt; td＆gt;＆＃34; + element.dRequired +＆＃34;＆lt; / td＆gt;＆＃34 ;; actionsListHTML + =＆＆＃34;＆lt; td＆gt;＆lt; input type =＆＃39; checkbox＆＃39;＆＃34; +（（element.bCompleted == 0）？＆＃34;＆＃34;：＆＃34; check＆＃34;）+＆＃34;禁用＆GT;＆LT; / TD＆GT;＆＃34 ;; actionsListHTML + =＆＃34;＆lt; / tr＆gt;＆＃34 ;; }）; } $（＆＃34;＃workOrderActionsListBody＆＃34）。HTML（actionsListHTML）; 我尝试了多种方法，但没有任何效果。如果我克隆＆lt; select＆gt;本身，当我尝试连接我的字符串时，当我做＆＃34;＆lt; td＆gt;＆＃34; + WOSkuSelectTemplate +＆＃34;＆lt; td＆gt;＆＃34;，它只显示类似[object：object]的内容。如果我做+ WOSkuSelectTemplate.html（）+，我只得到没有选择的选项，这就是为什么我克隆一个＆lt; div＆gt;并得到.html（），它给了我＆lt; select＆gt;本身有选择。但无论我尝试什么，我似乎都无法制作$（WOSkuSelectTemplate）.val（element.nProductTypeID）;部分工作...所有我的＆lt; select＆gt;都有选项，但他们没有选择正确的行。组合框本身具有正确的值，我甚至可以从控制台设置它们。但是我无法让我的javascript为我做这件事。我看到的唯一选择就是像我一样获取字符串，并替换＆＃39; selected =＆＃34;＆＃34;＆＃39;选择=＆＃34;＆＃39; + element.nProductTypeID +＆＃39;＆＃34;＆＃39;但我真的不觉得干净...... 有没有其他方法来实现这一目标？英语不是我的主要语言，对不起，如果有什么不清楚的话。谢谢。

Answer 1

您可以使用此

WOSkuSelectTemplate.find('select').find("option[value = '" + element.nProductTypeID + "']").attr("selected", "selected");

Answer 2

它＆＃34;脏＆＃34;但你可以这样做：

＆＃13;

regY

＆＃13;

// [test code]
var actionsList = [{
    nProductTypeID: 2, 
    nID: 1, 
    cTaskNumber: 3, 
    nQty: 10,
    nActionTypeID: 75,
    cFrom: "John", 
    cTo: "Doe", 
    dRequired: "true", 
    bCompleted: 0
}];

// [/test code]

$(document).ready(function() {

// other code...
    var actionsListHTML = "";

    if(actionsList) { //if there are actions entries
        actionsList.forEach(function(element) {
            var clonedDivWithSelect = $("#WOSkuSelectTemplate").clone();
            clonedDivWithSelect.find("option[value=\"" + element.nProductTypeID + "\"]").attr("selected", "selected");
            
            actionsListHTML += "<tr>";
                actionsListHTML += "<td>" + element.nID + "</td>";
                actionsListHTML += "<td>" + element.cTaskNumber + "</td>";
                actionsListHTML += "<td>" + clonedDivWithSelect.html() + "</td>";
                actionsListHTML += "<td>" + element.nQty + "</td>";
                actionsListHTML += "<td>" + element.nActionTypeID + "</td>";
                actionsListHTML += "<td>" + element.cFrom + "</td>";
                actionsListHTML += "<td>" + element.cTo + "</td>";
                actionsListHTML += "<td>" + element.dRequired + "</td>";
                actionsListHTML += "<td><input type='checkbox'" + ((element.bCompleted == 0) ? "" : "checked") + " disabled></td>";
            actionsListHTML += "</tr>";
            
        });
    }
    $("#workOrderActionsListBody").html(actionsListHTML);
    
    // other code...
});

＆＃13;

P.S。是啊Agam Banga按时击败我选择部分。

<select>的jQuery .clone（）：更改所选选项

2 个答案: