使用jquery生成html表时设置下拉选择值

时间:2017-06-02 11:43:32

标签: javascript jquery html

我正在生成一个带有下拉列表的html表和一个来自数组的文本框。我将数组值属性值存储在文本框中,并根据键属性中的值comin我想要设置每行下拉列表的选定值。  如何设置下拉值。 我的代码是这样的。一切都完成了我只想设置下拉选择值。

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);

由于

2 个答案:

答案 0 :(得分:1)

您可以通过为该索引选择选项来设置它,例如

run()

答案 1 :(得分:0)

我会这样做:

$(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