jquery从多个

Question

我选择下拉列表，我在名称中使用数组符号，如

<select name="services[]" id="service_id" multiple>
  <option value="4">four</option>
  <option value="1">one</option>
  <option value="3">three</option>
</select>

现在我需要从更改事件的下拉列表中获取当前（最后）选定的值。

到目前为止我尝试过的是

var clicked = $('#service_id option:selected').last().val();
alert(clicked);
//also tried as
//$(this).closest('select').find('option').filter(':selected:last').val();
//and this is tried too
// $(this).val();
// this.value;

多选时，所有这些都给了我错误的价值。

我需要什么

如果选择four，则接下来选择one，它应该提醒1（请记住多重选择时）。

如果选择three，然后选择four，则应提醒4

总之，即使在多选

中也总是需要点击选项的值

**无法从名称services[]

中删除数组符号

Answer 1

没有本地方式，但您可以保存点击选项的顺序，然后获取最后一个。

即，针对选择的data属性： -

$('#service_id option').click(function() {
  var values = $(this).parent().data('values') || [];
  var index = values.indexOf(this.value);
  index >= 0 ? values.splice(index, 1) : values.push(this.value);
  $(this).parent().data('values', values);
});

$('#service_id').click(function() {
  var values = $(this).data('values');
  console.log(values);
  
  var last = values[values.length - 1];
  console.log('last:' + last);  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="services[]" id="service_id" multiple>
  <option value="4">four</option>
  <option value="1">one</option>
  <option value="3">three</option>
</select>

Answer 2

试试这个演示

＆＃13;

＆＃13;

$(function(){
	var last_selected;
  $("#service_id option").click(function(){
  if($(this).is(":selected")) {
  	last_selected = $(this).attr('value');
  }  
	$("#result").html(last_selected);
	});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="services[]" id="service_id" multiple>
  <option value="4">four</option>
  <option value="1">one</option>
  <option value="3">three</option>
</select>

<p>Last selected : <span id="result"></span></p>

＆＃13;

＆＃13;

＆＃13;

Answer 3

所以你只想获得最后选择的元素？

只需创建一个变量来存储每个选项单击中的最后一个选定元素，如本演示所示：

＆＃13;

＆＃13;

 var currLast = null;
 $('#service_id').children().on('click', function(){
    var val = $(this).val();
    if (currLast === val) { // do nothing if current selected is the same elem
      return;
    }
    currLast = val;
    console.log(currLast)
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="services[]" id="service_id" multiple>
  <option value="4">four</option>
  <option value="1">one</option>
  <option value="3">three</option>
</select>

＆＃13;

＆＃13;

＆＃13;