如何覆盖 Select2 标签框中的用户选择

Question

我的问题与标签框中显示的 Select2 选择有关（我指的不是下拉列表中的选项）。我的 select2 运行良好，但我想用 jquery 覆盖用户选择。为此，我想清除用户原始选择的标签框，然后一个接一个地添加我选择的选择。问题是，当我清除标签框时，使用 $('#dropList').val([""]... 似乎没有任何效果。Fiddle 示例显示 'Earth' 和 'Wind' 已经选择。单击 'show buttons' 后，我想添加，单独说 'Wind'，或 'Wind' 和 'Fire'。但这几乎就像代码不能'不处理空标签框。非常感谢任何想法。http://jsfiddle.net/03aocump/

https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css
https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js


<select id="dropList" style="width:300px" multiple="multiple">
  <option value="Earth">Earth</option>
  <option value="Wind">Wind</option>
  <option value="Fire">Fire</option>
</select>
<br>
<br>
<br>
<button id='panel' >Show buttons</button>
<div id="target">
  <button  id='buttonWind' class='buttonstyle' type="button">Click for Wind</button>
  <button  id='buttonFire' class='buttonstyle' type="button">Click for Fire</button> 
</div>




//Initial value (imagine this has been as entered by User)
$("#dropList").select2();
$('#dropList').val(["Earth","Wind"]).trigger('change.select2');

// ---------------------

// Here we override the User selection
$('#panel').click(function() {
    $('#target').show();

$('#dropList').val([""]).trigger('change.select2');  // Clears tagbox but stops rest of code working!

$('#buttonWind').on('click',function() {
  var sel=$('#dropList').val();
  sel.push("Wind");
  $('#dropList').val(sel).trigger('change.select2');
})

$('#buttonFire').on('click',function() {
  var sel=$('#dropList').val();
  sel.push("Fire");
  $('#dropList').val(sel).trigger('change.select2');
})

});




body {padding:30px;}

#target {
  display: none;
  background:yellow;
  height:30px;
  width:320px;
  padding:15px;
}

.buttonstyle{
  width:150px;
  height:20px;
}

Answer 1

您的问题在 buttonWind 和 buttonFire 中重复出现：

var sel=$('#dropList').val()

当您清除内容时，上一行返回 null。这意味着您必须将此 null 转换为空数组：

var sel=$('#dropList').val() || [];

这将解决您的问题 (the updated fiddle)：

$("#dropList").select2();
$('#dropList').val(["Earth","Wind"]).trigger('change.select2');

// ---------------------

// Here we override the User selection
$('#panel').click(function() {
    $('#target').show();

    $('#dropList').val([""]).trigger('change.select2');

    $('#buttonWind').on('click',function() {
        var sel=$('#dropList').val() || [];
        sel.push("Wind");
        $('#dropList').val(sel).trigger('change.select2');
    })

    $('#buttonFire').on('click',function() {
        var sel=$('#dropList').val() || [];
        sel.push("Fire");
        $('#dropList').val(sel).trigger('change.select2');
    })

});

body {padding:30px;}

#target {
    display: none;
    background:yellow;
    height:30px;
    width:320px;
    padding:15px;
}

.buttonstyle{
    width:150px;
    height:20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>


<select id="dropList" style="width:300px" multiple="multiple">
    <option value="Earth">Earth</option>
    <option value="Wind">Wind</option>
    <option value="Fire">Fire</option>
</select>
<br>
<br>
<br>
<button id='panel' >Show buttons</button>
<div id="target">
    <button  id='buttonWind' class='buttonstyle' type="button">Click for Wind</button>
    <button  id='buttonFire' class='buttonstyle' type="button">Click for Fire</button>
</div>

如何覆盖 Select2 标签框中的用户选择

How to override User selections in Select2 tagbox

jquery

select2