javascript 在多选中，我需要能够获取当前所选选项的值

syqv5f0l 于 2023-02-15 发布在 Java

关注(0)|答案(4)|浏览(174)

编辑：我想我把你们弄糊涂了，如果我选择val1，我需要函数返回val1。如果我选择val2，val1仍然作为多选的一部分，我需要返回val2。然后我可以使用这些值来设置重新创建的输入的id和name。
我有一个选择列表，其中包含multiple ="multiple"
我想创建一个与每个选中选项关联的文本输入，并根据每个新选中选项的值设置新输入的id和name，但我总是从onchange事件中获取第一项的值，不是第一个值，而是第一个选中的值，所以如果我先选择val2，那么它就会返回，但是如果我先选择val1，然后选择val2，则id和name将与选择val1时相同。

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

我使用了下面的函数，它返回第一个值。

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

 });

这将返回第一个选择的选项。如果我选择第二个选项，我仍然得到第一个值。我需要得到任何一个选择的值。
先谢了。

JavaScript

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

4条答案

按热度按时间

ru9i0ody1#

解决方法是保存以前选定的图元，并将它们与新选定的图元进行比较：

let selectedOptions = [];

$("#multiSelect").on("change", function() {
  const newSelectedOptions = $(this).val() || [];
  const addedOptions = newSelectedOptions.filter(option => !selectedOptions.includes(option));
  const removedOptions = selectedOptions.filter(option => !newSelectedOptions.includes(option));
  selectedOptions = newSelectedOptions;
  console.log("addedOptions", addedOptions);
  console.log("removedOptions", removedOptions);
});

<select id="multiSelect" multiple="multiple">
  <option value="value_1">Value 1</option>
  <option value="value_2">Value 2</option>
  <option value="value_3">Value 3</option>
</select>

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

赞(0）回复(0）举报 2023-02-15

bjp0bcyl2#

更改时将获得选定的值：

$("#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>

赞(0）回复(0）举报 2023-02-15

g6ll5ycj3#

试试这个：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>

赞(0）回复(0）举报 2023-02-15

bksxznpy4#

也许这是你想要的，或者不是：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>

赞(0）回复(0）举报 2023-02-15

我来回答

javascript 在多选中，我需要能够获取当前所选选项的值

4条答案

相关问题

热门标签

最新问答