Question

我的问题与标签栏中显示的Select2选项有关（我不是指下拉列表中的选项）。我的select2运行良好，但我想用jquery覆盖用户选择。要做到这一点，我想清除用户原始选择的标签框，并逐个添加我选择的选择。问题是，当我清除标签箱时，使用$（'＃dropList'）。val（[“”] ......似乎没什么用。小提琴示例显示'地球'和'风'已经选中。点击后'显示按钮'我想添加，单独说'风'，或'风'和'火'。但它几乎就像代码无法处理空标签箱。任何想法都非常赞赏。{{3 }}

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标签框中的用户选择

1 个答案: