Within a multi select, I need to be able to get the value of the currently selected option

问题

Edit:I think I have confused you guys with what I need. If I select val1 I need the function to return val1. If I then select val2, with val1 still selected as part of the multi select, I need to return val2. Then I can use the values to set the id and name of rewly created inputs.

I have a select list that has multiple="multiple"

I want to create a text input associated with each selected option and set the id and name of the new input based on the value of each newly selected option, but I always get the value of the first item from the onchange event. Not the first value, but the first selected value. So if I choose val2 first, that is returned, but if I choose val1 first then val2 the id and name will be the same as when val1 is selected.

 <select id="multiSelect" multiple="multiple">
  <option value="val1">Value 1</option>      
  <option value="val2">Value 2</option>
  <option value="val3">Value 3</option>
 </select>

I have used the following function and it returns the first value.

 $("#multiSelect").on('change', function(evt, params) {
   alert($("option:selected", this).val());

 });

This will return the first selected option. If I then choose the second option, I still get the first value. I need to get the value of whichever option has been selected.

Thanks in advance.

回答1:

The workaround is to save previously selected elements and compare them with newly selected ones:

Fiddle.

var selected = [];

$("#multiSelect").on('change', function()
{
    var value = $(this).val();
    if (!value)
    {
        selected = [];
        alert("No value is clicked");
        return;
    }
    var newSelected = value;
    var changedOnes = [];
    var direction = (newSelected.length < selected.length);
    for (var i = 0; i < newSelected.length; i++)
    {
        var isNew = true;
        for (var j = 0; j < selected.length; j++)
        {
            if (newSelected[i] == selected[j])
            {
                isNew = false;
                break;
            }
        }
        if (isNew || direction)
        {
            changedOnes.push(newSelected[i]);
        }
    }
    selected = newSelected;
    alert(changedOnes);
});

回答2:

You get the selected values on change:

 $("#multiSelect").on('change', function () {
     var selected = $.map($('option:selected', this),

     function (e) {
         return $(e).val();
     });
     alert(selected);
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="multiSelect" multiple="multiple">
    <option value="val1">Value 1</option>
    <option value="val2">Value 2</option>
    <option value="val3">Value 3</option>
</select>

回答3:

Try this one : http://jsfiddle.net/csdtesting/jb7ckarp/

$("#multiSelect").on('change', function(evt, params) {
  $("#myDiv").append("<span id='mySpan'><input type='text' name='" + $(this).val() + "' value='My name is: " + $(this).val() + "'/>")
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="multiSelect" multiple="multiple">
  <option value="val1">Value 1</option>
  <option value="val2">Value 2</option>
  <option value="val3">Value 3</option>
</select>

<div id="myDiv">
</div>

回答4:

Maybe this is what you want, or not :D http://jsfiddle.net/mnm2oaeo/

<select id="multiSelect" multiple="multiple">
  <option value="val1">Value 1</option>
  <option value="val2">Value 2</option>
  <option value="val3">Value 3</option>
</select>

<script type="text/javascript">

var items = [];

$("#multiSelect").on('change', function(evt, params) {

  var selected = $(this).val() || [];

  if (selected.length == 0)
    items.length = 0;
  else {
    $.each(selected, function(i) {
      if (items.indexOf(selected[i]) == -1) {
        items.push(selected[i]);
        alert(selected[i]);
      }
    });
  }

});

</script>

来源：https://stackoverflow.com/questions/26240887/within-a-multi-select-i-need-to-be-able-to-get-the-value-of-the-currently-selec