Как исправить: элемент SELECT возвращает только значение первой опции?

Question

Итак, у меня есть этот элемент select, который я использую с datatables.js. Я вставляю его в строку (внутри div). Вот как это выглядит:

Всякий раз, когда я пытаюсь использовать jQuery для извлечения текущего значения этого элемента Select, он возвращает только значение первой опции, даже если я изменяю выбор.

Я попробовал другой подход к тому, как вставить элемент div и выбрать элемент. Во-первых, документированный подход на сайте datatables с использованием функции 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 - это сокращение от идентификатора , что означает, что он должен однозначно указывать точно на один элемент.