使用jquery生成html表格時設置下拉選定的值

我正在使用下拉列表和數組中的文本框生成html表格。我將數組值屬性值存儲在文本框中，並基於key屬性中的值comin來設置每行中下拉列表的選定值。如何設置下拉值。我的代碼是這樣的。一切都完成了我只想設置下拉選擇的值。使用jquery生成html表格時設置下拉選定的值

var filtrnode=[arrayvalue]; 

$.each(filterNodeData.FilterData, function (i, item) { 
    debugger; 
    var newData = filterNodeData.FilterData[i]; 
    trHTML += '<tr><td>' + '<select class="form-control"><option value="and">And</option><option value="or">Or</option></select>' + '</td>' + 
      '<td>' + '<input class="form-control" size=35 type="text" id="filterValue" value= ' + filterNodeData.FilterData[i].value + '>' + '</td>' + 
      '<td><input type="button" id="delFilter" class="delHeader btn btn-md red" value="Delete" onclick="deleteFilter(this)" ></td>' + 
      '<td><input type="button" id="AddFilter" class="btn btn-md btn-primary" value="Add" onclick="insertFilter()" ></td>' + '</tr>'; 
}); 
$('#filterTable').append(trHTML);

感謝

來源

2017-06-02 Utpal

要在哪個鍵或值上設置下拉值？向我們展示您的'FilterData'和密鑰，以便在下拉選項中進行設置。 –

它將基於每個元素中存儲在鍵中的值進行動態調整將會選擇下拉菜單 – Utpal

當您爲文本框設置'.value'時，類似地根據您希望設置的選擇「下拉」的關鍵字。 –

您可以通過獲取選定爲該指數像選項設置，

$.each(filterNodeData.FilterData, function (i, item) { 
    var newData = filterNodeData.FilterData[i], 
     value=newData.value, 
     key = newData.key; 
    trHTML += '<tr><td>' + '<select class="form-control">'+ 
      '<option value="and" '+(key=='and'?'selected':'')+'>And</option>'+ 
      '<option value="or" '+(key=='or'?'selected':'')+'>Or</option>'+ 
     '</select></td>' + 
      '<td>' + '<input class="form-control" size=35 type="text" id="filterValue" value= ' + value + '>' + '</td>' + 
      '<td><input type="button" id="delFilter" class="delHeader btn btn-md red" value="Delete" onclick="deleteFilter(this)" ></td>' + 
      '<td><input type="button" id="AddFilter" class="btn btn-md btn-primary" value="Add" onclick="insertFilter()" ></td>' + '</tr>'; 
}); 
$('#filterTable').append(trHTML);

來源

2017-06-02 11:55:21

我會做這樣的：

$(document).ready(function() { 
    // store your html as a variable, `` alows you to use lines in string 
    var row = ` 
    <tr> 
    <td><select class="form-control"><option value="and">And</option><option value="or">Or</option></select></td> 
    <td><input class="form-control" size=35 type="text" id="filterValue"></td> 
    <td><input type="button" id="delFilter" class="delHeader btn btn-md red" value="Delete" onclick="deleteFilter(this)" ></td> 
    <td><input type="button" id="AddFilter" class="btn btn-md btn-primary" value="Add" onclick="insertFilter()" ></td> 
    </tr> 
    ` 
    var filtrnode = [{arrayvalue}]; 

    $.each(filtrnode, function(i, item) { 
    // make a jQuery object from your html variable 
    var newRow = $(row); 
    // and now you are free to use jQuery selectors and functions on it 
    newRow.find("select option[value="+ item.key +"]").prop("selected", true); 
    newRow.find("input[type='text']").val(item.value); 
    $('#filterTable').append(newRow); 
    }); 
});

存儲你的HTML代碼作爲一個變量使用``可以讓你使用換行符並創建一個更容易閱讀的代碼。從存儲的HTML創建jQuery對象後，您可以訪問所有酷炫的jQuery函數。這使得你的代碼不太容易出錯和錯別字。這是一個jsFiddle。

來源

2017-06-12 16:18:48 dallows

使用jquery生成html表格時設置下拉選定的值

回答

相關問題