Блог

Пожалуйста, взгляните на эту скрипку

Я получил мультиселект jQueryUI с этого сайта. У меня возникли проблемы с поиском правильного селектора для добавления значения кнопки в область div, когда оно установлено, и удаления его, когда оно снято. Согласно документации, мне нужно использовать click функцию, чтобы проверить, установлен ли флажок для параметра. Вот обычная демонстрация, которая показывает, как должно работать добавление текста. Любая помощь была бы оценена.

Сбой скрипта:

 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>
  

Вы не можете удалить текст с помощью 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();
    }
});
  

ДЕМОНСТРАЦИЯ

Используйте

 $("select").multiselect({
    selectedText: "# of # selected",
    click: function (event, ui) {
        if (ui.checked) { //Use ui.checked
            var span = '<div id="'   ui.value   '">'  ui.text  '</div>'; //create div/span for easy access
            post_text.append(span); //append it
        } else {
            post_text.find('#' ui.value).remove(); //remove based on ui-value
        }
    }
});
  

ДЕМОНСТРАЦИЯ