javascript - 附加按钮值或在选中/取消选中时将其从 div 中删除

Question

请看一下这个fiddle

我从 this site 获得了 jQueryui 多选。我很难找到正确的选择器，以便在选中按钮时将其值附加到 div 区域，并在未选中时将其删除。根据文档，我需要使用 click 函数来检查是否选中了某个选项。这是normal demo这显示了附加文本应该如何工作。任何帮助将不胜感激。

失败的脚本:

var post_text = $('#post_text');

$("select").multiselect({
   selectedText: "# of # selected",
 click: function(event, ui){
     if($(this).find('input').is('.checked'))
     {
      post_text.append(ui.value);
     }
     else
     {
      post_text.remove(ui.value);
      }  
 }
});

HTML:

<select multiple>
<option value="A">Option 1</option>
<option value="B">Option 2</option>
<option value="C">Option 3</option>
<option value="D">Option 4</option>
<option value="E">Option 5</option>
<option value="F">Option 6</option>
</select>

<div id="post_text"></div>

Answer 1

您无法使用 remove() 删除文本，你需要一个元素。我已添加<span>在这种情况下。

尝试下面的代码，

var post_text = $('#post_text');

$("select").multiselect({
    selectedText: "# of # selected",
    click: function (event, ui) {
        ui.checked 
        ? post_text.append('<span>' + ui.value + '</span>') 

        : $('span:contains('+ui.value+')').remove();
    }
});

<强> DEMO