Select2:如何仅获取当前选定的值

时间:2014-06-20 12:24:58

标签: jquery jquery-select2

选择2返回absdefghi值。 如何仅获取当前选定的值或数据属性 我希望只选择abcdef,然后才能选择?

简而言之

我选择多个然后最新选择将显示。

   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <link href="http://ivaynberg.github.io/select2/select2-3.5.0/select2.css" rel="stylesheet"/>
  <script src="http://ivaynberg.github.io/select2/select2-3.5.0/select2.js"></script>
    <script>
        $(document).ready(function() {
            var target = $("#e1");
            var initId = $(target).select2();       
            $(target).change(function() {
                var theID = $(target).select2();
                alert(theID);
            });
        });
    </script>
    <select id="e1" multiple >
        <option value="abc" data-id='1' >ABC</option>
        <option value="def" data-id='2'>DEF</option>
        <option value="ghi" data-id='3'>GHI</option>
        <option value="jkl" data-id='4'>JKL</option>
        <option value="mno" data-id='5'>MNO</option>
    </select>

6 个答案:

答案 0 :(得分:2)

如果有人还在寻找能够使用select2倍数工作的东西,请按以下步骤操作:

$(".select2-enabler").on("select2:select", function (evt) {
  id = evt.params.data.id;
  console.log(id); //Do what you want with this
});

因此,以我个人用例为例,我保留了在数据顺序属性中select2插件中选择内容的顺序,这里是完整代码,如果它可以帮助某人(请参阅{ {3}}实例):

$(".select2-enabler").select2(); //Enable select2 plugin

$(".select2-enabler").on("select2:select", function(evt) {

  newArr = [evt.params.data.id];
  data = $(this).data("order");
  arr = tryParseJSON(data);
  if (arr) {
    newArr = arr.concat(newArr);
  }
  $(this).data("order", JSON.stringify(newArr));
  //For demonstration purpose only
  $("#result").val($(this).data("order"));

}).on("select2:unselect", function(evt) {

  data = tryParseJSON($(this).data("order"));
  index = $.inArray(evt.params.data.id, data);
  if (!!~index) { //Bitwise flip, so that -1 == false
    data.splice(index, 1);
  }
  $(this).data("order", JSON.stringify(data));
  //For demonstration purpose only
  $("#result").val($(this).data("order"));

});

//Helper function for ParseJSON, optional
function tryParseJSON(jsonString) {
  try {
    var o = JSON.parse(jsonString);
    if (o && typeof o === "object") {
      return o;
    }
  } catch (e) {}
  return false;
};

答案 1 :(得分:1)

请使用以下给出的JS我认为它将在您的解决方案中使用

$(document).ready(function() {
            var target = $("#e1");

            $(target).change(function() {
                var latest_value = $("option:selected:first",this).val();
                alert(latest_value);

            });
        });

&#34; http://jsfiddle.net/GEHUD/651/&#34;

如果此解决方案不起作用,请告诉我

答案 2 :(得分:1)

您必须遍历下拉列表的选定选项,然后将它们添加到内部数组,以便稍后在代码中使用

<强>小提琴

http://jsfiddle.net/GLrN7/

<强>代码

    $(document).ready(function () {

        $("#btnOutput").on("click", function () {
            var x = [];
            $("#ddlItems > option:selected").each(function (index, el, list) {
                x.push(el.getAttribute("data-id"));
            });

            alert(x);

        });
    });

答案 3 :(得分:0)

查看this链接,这将为您提供答案。你也可以测试

您可以使用以下方式获取ID /文本

var theID = $(test).select2('data').id;
var theSelection = $(test).select2('data').text;

Click here for working example on jsFiddle

var selections = $('#e1').val();
alert(selections);

答案 4 :(得分:0)

试试这个

var theID = $("option:selected", target).data("id");

答案 5 :(得分:0)

$eventSelect.on("change", function (e) { 
    alert( $(this).val() );

})