我如何知道多选下拉列表中最后一个未选中的选项？

如何解决我如何知道多选下拉列表中最后一个未选中的选项？

我有一个多选列表框

<div id="multiselectList">
  <select>
    <option value="option1">Val 1</option>
    <option value="option2">Val 2</option>
    <option value="option3">Val 3</option>
    <option value="option4">Val 2</option>
    <option value="option5">Val 3</option>
  </select>

假设最初选择了所有选项。现在我从多选列表中取消选择 option2。我如何知道用户当前未选择哪个选项。我使用了下面的代码，但它给了我所有未选择的值。

var unselectedValue = $("#multiselectList").find('option:not(:selected)');

谁能帮我找到解决方案？ 提前致谢

解决方法

你可以使用jquery last()

https://api.jquery.com/last/

document.querySelector('select').addEventListener('change',() => {

  var unselectedValue = $("#multiselectList").find('option:not(:selected)').last();
  console.log(unselectedValue.val())
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="multiselectList">
  <select multiple>
    <option value="option1" selected>Val 1</option>
    <option value="option2" selected>Val 2</option>
    <option value="option3">Val 3</option>
    <option value="option4">Val 4</option>
    <option value="option5" selected>Val 5</option>
  </select>

,

尝试使用

pip3 install -e git+https://github.com/user/repo.git#egg=mypackagename

$(document).ready(function() {
  $("#sel").on("click",function(event) {
    if(!event.originalEvent.srcElement.selected) {
      console.log($(event.originalEvent.srcElement).val());
    }
  });
});

,

尝试使用

// save array to compare in function check
let lastSelected = [];

// set last selected value on document ready
$(document).ready(() => {
  lastSelected = $('select option:not(:selected)')
    .map((i,el) => el.value)
    .get();
});

$('select').on('change',() => {
  const currentSelected = $('select option:not(:selected)')
    .map((i,el) => el.value)
    .get();

  // compare to get recently selected
  const selected = lastSelected.filter(
    (val) => !currentSelected.includes(val)
  );

  // compare to get recently unselected
  const unselected = currentSelected.filter(
    (val) => !lastSelected.includes(val)
  );

  recentChanges(selected,unselected);

  // update last selected
  lastSelected = currentSelected;
});

// recentChanges event
function recentChanges(selected,unselected) {
  console.log(
    (selected.length > 0 ? selected : 'nothing') + ' is selected'
  );
  console.log(
    (unselected.length > 0 ? unselected : 'nothing') + ' is unselected'
  );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select multiple>
  <option value="option1" selected>Val 1</option>
  <option value="option2" selected>Val 2</option>
  <option value="option3">Val 3</option>
  <option value="option4">Val 4</option>
  <option value="option5" selected>Val 5</option>
</select>

,

我如何知道用户当前未选择哪个选项。

// This is the selected value on page load
let selected = $("#multiselectList option:selected").text()

// On change event
$("#multiselectList select").on("change",function(){

  // Keep the previous selection
  let prevSelection = selected

  // Get the new one
  selected = $(this).find('option:selected').text();
  
  // Results
  console.log(`${prevSelection} was deselected and ${selected} was selected.`)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="multiselectList">
  <select>
    <option value="option1">Val 1</option>
    <option value="option2">Val 2</option>
    <option value="option3" selected>Val 3</option>
    <option value="option4">Val 4</option>
    <option value="option5">Val 5</option>
  </select>
</div>