Question

所以我有这个用于datatables.js的select元素。我将其插入每行（在div内部）。外观如下：

每当我尝试使用jQuery提取Select元素的当前值时，即使我更改选择，它也仅返回第一个选项的值。

我尝试了不同的方法来插入div和select元素。首先是在数据表站点中使用它们具有的format（e）函数进行记录的方法。现在，row.push方法仍然具有相同的结果。

HTML
<table style="width:100%;" id="table_openRequest" class="table dt-responsive nowrap dataTable no-footer dtr-inline collapsed" ></table>

function updateStatus(itemID){

   var jobOrder = itemID;
   alert($('#project-status-' + jobOrder).val());

}

DATATABLES INITIALIZE:
var myTABLE1 = $('#table_openRequest').DataTable( {

   data: null,
   paging: true,
   order: [ 5 , "desc" ],
   pageLength: 100,
   //scrollX: "100%",
   responsive: true,
   language:{
   "paginate": {
      "previous": "<",
      "next":">"
   }
   },
   select: true,
   columns: [
      { title: "", "orderable": false}, 
      { title: "Job Order #:"},
      { title: "Project Title:"},
      { title: "Requested by:"},
      { title: "Status:"},
      { title: "Created:"},
      { title: "", 'className': 'none'}
],
});

INSERT DATA AND DIV IN DATATABLE ROWS:
BU_demand();
function BU_demand() {
    //BU_demand
    var url = _spPageContextInfo.webAbsoluteUrl +
        "/_api/Web/Lists/GetByTitle('Intake_BUdemand')/items?$select=*,Author,Author/Title,Author/Name,Editor,Editor/Title,Editor/Name&$expand=AttachmentFiles,Author,Editor&$orderby= ID desc&$top=5000";
    $.ajax({
        url: url,
        method: "GET",
        headers: {
            Accept: "application/json;odata=verbose"
        },
        success: function(data) {
            for (var i = 0; i < data.d.results.length; i++) {
               var obj = data.d.results[i];

               var dateRequested = moment(obj.Created).format('YYYY/MM/DD  HH:MM:SS')
               var jobOrder = obj.ID;
               var projectTitle = obj.Project_Title;
               var requestedBy = obj.Author.Title;
               var status = obj.Status;
               var modifiedTime = moment(obj.Modified).format('YYYY/MM/DD  HH:MM:SS');
               var modifiedBy = obj.Editor.Title;
               console.log(modifiedBy);

               var row = [];

               row.push('');
               row.push('<span style="color:blue;" class="span-jobOrder">' + jobOrder + '</span>');
               row.push(projectTitle);
               row.push(requestedBy);
               row.push(status);
               row.push(dateRequested);
               row.push(
                  `<div class="expand-container container" id="expand-${jobOrder}" style="min-width:500px;">

                     <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                        <label for="project-status" style="margin:0px; font-size:16px;">Status:</label>
                        <select name="test" class="custom-select form-input" id="project-status-${jobOrder}" style="margin-top:5px; margin-left:10px; height:22px;">
                           <option value="">Select Project Status</option>
                           <option value="Set Appointment">Set Appointment</option>
                           <option value="Interview BA">Interview BA</option>
                           <option value="SOW In Progress">SOW In Progress</option>
                           <option value="Completed">Completed</option>
                           <option value="Cancelled">Cancelled</option>
                        </select>
                     </div>

                     <div class="form-group row" style="margin-top:10px;">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                           <button type="button" id="btn-openRequest-${jobOrder}" class="btn btn-success" onclick="updateStatus(${jobOrder});" style="border-radius:0px !important; padding: 0px; margin-left:15px; min-width:50px !important;">OK</button>
                        </div>
                     </div>

                     <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="margin-top: 20px;">
                           <label for="" style="margin:0px; font-size:16px;">Last Updated: </label>
                           <span style="margin-left:15px;">Modified by ${modifiedBy} ${modifiedTime} </span>
                     </div>

                  </div>`
                  );

               myTABLE1.row.add(row).draw();

            }
        },
        error: function(e) {}
    })
}

Answer 1

这是使用原始Javascript的工作方式：

document.getElementById('select').addEventListener('change', function() {
  console.log(this.value);
})

<select id="select">
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
</select>

jQuery版本：

$('#select').on('change', function() {
  console.log($(this).val());
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select">
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
</select>

因此您的代码应该可以正常工作，错误必须在其他地方。您确定这里没有重复的id问题吗？每页具有给定id值的元素不能超过一个。

如果在页面上用id="foo"说两个元素，$('#foo') 将始终只返回第一个元素：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="foo" value="firstOne" />
<input id="foo" value="secondOne" />
<button onclick="console.log($('#foo').val());" type="button">Log $('#foo').val()</button>

id是 identifier 的缩写，这意味着它必须唯一地指向一个元素。

如何解决：SELECT元素仅返回第一个选项的值？

1 个答案: