代码之家 › 专栏 › 技术社区 › peace_love

如何仅在添加选项时触发,而不在删除时触发(多选2)?

jquery-select2 select jquery

peace_love · 技术社区 · 7 年前

我有一个功能,当我更改多重选择的选项时,输出为“添加选项”。问题是,当我删除该选项时,我不想要任何输出,我不知道如何实现这一点:

$(document).ready(
    function () {
        $("#multipleSelectExample").select2();
    }
);


 $("#multipleSelectExample").on("change", function () {
    console.log("add option");
       });

.selectRow {
    display : block;
    padding : 20px;
}
.select2-container {
    width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://select2.github.io/select2/select2-3.5.1/select2.js"></script>
<link href="http://select2.github.io/select2/select2-3.5.1/select2.css" rel="stylesheet"/>


<body>
    <div class="selectRow">
        <!-- Using data-placeholder below to set place holder value versus putting in configuration -->
        <select id="multipleSelectExample" data-placeholder="Select an option" multiple>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
            <option value="5">Option 5</option>
        </select>
    </div>
</body>

2 回复 | 直到 7 年前

newman 7 年前

用select2 selecting替换更改事件

版本4.0+

$('#multipleSelectExample').on("select2:selecting", function(e) { 
  console.log("add option");
});

4.0之前的版本

$('#multipleSelectExample').on("select2-selecting", function(e) { 
   console.log("add option");
});

您的版本

$("#multipleSelectExample").on("select2-selecting", function () {
    console.log("add option");
});

Anup Yadav 7 年前

现在,您将以数组格式获得选定选项的精确值。我希望这足够你进一步处理。我为您添加了一些肮脏的逻辑,但这是唯一可用的选项。

$(document).ready(
    function () {
        $("#multipleSelectExample").select2();
    }
);

selectedselect2 = []
 $("#multipleSelectExample").on("change", function (event) {
    //console.log(event);
    //console.log(event["val"]);
    //console.log($(this).val());
    //console.log(selectedselect2.length)
    
    if ($(this).val() && selectedselect2.length == 0)
    {
      selectedselect2 = $(this).val()
      console.log("added"); 
    }
    else if ($(this).val() && selectedselect2.length < $(this).val().length)
    {
      selectedselect2 = $(this).val()
      console.log("added"); 
    }
    else if ($(this).val() && selectedselect2.length > $(this).val().length)
    {
      selectedselect2 = $(this).val()
      console.log("removed"); 
    }
    else{
    selectedselect2 = []
    console.log("removed"); 
    }
    
 });

.selectRow {
    display : block;
    padding : 20px;
}
.select2-container {
    width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://select2.github.io/select2/select2-3.5.1/select2.js"></script>
<link href="http://select2.github.io/select2/select2-3.5.1/select2.css" rel="stylesheet"/>


<body>
    <div class="selectRow">
        <!-- Using data-placeholder below to set place holder value versus putting in configuration -->
        <select id="multipleSelectExample" data-placeholder="Select an option" multiple>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
            <option value="5">Option 5</option>
        </select>
    </div>
</body>