Develop Reference

How to clear a selected value in Selectize.js dropdown?

I have a selectize.js dropdown and I have to clear the selected value .
I have tried this (as suggested in another question):
var selectize = $("#optionNetFlow")[0].selectize;
selectize.clear();
But it gives the following error:
When I change it to this:
var selectize = $("#optionNetFlow").selectize;
selectize.clear();
I gives this error:
What I am doing wrong here?

I finally found the answer here Selectize.js Demos
What works for me is:
var $select = $('#optionNetFlow').selectize();
var control = $select[0].selectize;
control.clear();
what I was missing var $select = $('#optionNetFlow').selectize(); before applying the solution provided in above question's answer.
Now I am to get all the functions in console like :

Try this,
$("#optionNetFlow")[0].selectize.clear();

Try this out:- http://jsfiddle.net/adiioo7/2gnq1ruv/204/
JS:-
jQuery(function ($) {
var $select = $('#input-tags').selectize({
persist: false,
create: true
});
$("#btnClear").on("click", function () {
var selectize = $select[0].selectize;
selectize.clear();
});
});

All other answers either clear a single selectize or need a specific reference to the selectize in the moment of it's creation.
The solution below, on the other hand, works for any number of selectize elements you have inside any form; you just need to specify the desired form:
$('form').find('.selectized').each(function(index, element) { element.selectize && element.selectize.clear() })
The rationale is that Selectize keeps the original element in the DOM (hiding it), adds a reference to the selectize on the .selectize property of the DOM element and adds a CSS class selectized to it.
So the solution finds all the elements that have the CSS class selectized, loops through them and calls element.selectize.clear().

$(document).on('click', 'div.selectize-input div.item', function(e) {
var select = $('#services').selectize();
var selectSizeControl = select[0].selectize;
// 1. Get the value
var selectedValue = $(this).attr("data-value");
// 2. Remove the option
select[0].selectize.removeItem(selectedValue);
// 3. Refresh the select
select[0].selectize.refreshItems();
select[0].selectize.refreshOptions();
});
This do not remove the item from the select, just remove it from the selected options.

Or if you have multi select, and do want to restore selected items in the drop-down list (hide selected set to true).
var selectize = $("#select-item").selectize;
//clone array
var items = selectize.items.slice(0);
for (var i in items) {
selectize.removeItem(items[i]);
}
selectize.refreshOptions();

Remove a selected item from multiple select2 box on removal of selected item from another multiple select 2 box

I have two multiple select2 boxes, Box1 options are populated dynamically,when i select any option from this select box, it should get added to the new Box2. This scenario is working as required. Problem i am facing is. When i remove any selected item from the Box1, i am able to remove it from Box2. But if that item is selected in Box2 it still remains.
Ex: A,B,C are selected values in Box 1, Box2 gets populated with A,B,C. If i select B,c in Box 2 and if i remove B from Box1. My Box2 items will now be AC. But B,C will still remain selected in Box2.
Can anyone help me in solving this tricky problem.
$("#Box1").on("change", function() {
var box1List = $('#Box1').val();
$('#Box2').empty();
for (var key in box1List) {
var valueField = box1List[key];
var textField = $("#Box1 > option[value='"+valueField+"']").text();
$("#Box2").append($('<option>', {value: valueField, text: textField}));
}
});
$("#Box1").on("select2-removed", function(e) {
console.log("removed val=" + e.val + " choice=" + e.choice.text);
$('#Box2 option[value="'+e.val+'"]').remove();
});

After you alter the child <option> elements of a Select2 <select> element, you should call .change() on it to get it to update its display.
$('#Box2').change();
But in your case, you probably also want to restore the value of the Select2 after you remove and re-add the options.
$("#Box1").on("change", function() {
var val = $('#Box2').select2('val');
$('#Box2').empty();
$.each($('#Box1').select2('data'), function(i, item) {
$("#Box2").append($('<option>', {value: item.id, text: item.text}));
});
$('#Box2').select2('val', val);
});
When you use .select2('val', val) to set the value, you do not need to call .change().
jsfiddle

I have referenced from the post of Pierre de LESPINAY
Glideh. And I tried to apply to my project.
new_data = $.grep($('#my_input').select2('data'), function (value) {
return value['id'] != id_to_remove;
});
$('#my_input').select2('data', new_data);
It worked fine.

show multiple selected span values in jquery using comma

I've posted my full code on jsfiddle. I'm trying to show the user selected seats here. If user selected 2 from BS the result should be BS-2. Again if user selected 4 from FC the result should be added with the old one like BS-2, FC-4.
But, I've tried something here. its show the value of span element but if i selected the another one it replaces the previous one. How to add a comma and show the multiple selected span values in jquery?
JsFiddle
jQuery
$(".text").click(function(){
$(this).toggleClass('selected');
var data = $(this).text();
$('.returndata').text(data);
})

Try
var $texts = $(".text").click(function () {
$(this).toggleClass('selected');
var selected = $texts.filter('.selected').map(function () {
return $.trim($(this).text())
}).get()
$('.returndata').text(selected.join());
})
Demo: Fiddle

filtering only previously unselected <select> options qith JQuery

Previously I asked how to do this and was directed to this:
<script>
jQuery.fn.filterByText = function(textbox) {
return this.each(function() {
var select = this;
var options = [];
$(select).find('option').each(function() {
options.push({value: $(this).val(), text: $(this).text()});
});
$(select).data('options', options);
$(textbox).bind('change keyup', function() {
var options = $(select).empty().scrollTop(0).data('options');
var search = $.trim($(this).val());
var regex = new RegExp(search,"gi");
$.each(options, function(i) {
var option = options[i];
if(option.text.match(regex) !== null) {
$(select).append(
$('<option>').text(option.text).val(option.value)
);
}
});
});
});
};
</script>
(http://www.lessanvaezi.com/filter-select-list-options/)
When I use this filter on the select box it filters both the unselected AND the selected. I'd like it to ONLY filter the unselected because if a user wants to ammend the selections and filters again, the previously selected items go away - unless they meet the filter criteria.
I'm not that good at JavaScript or JQuery and can't understand how I might tell the above script to ignore options that are ":selected" but filter all else.
Here's a jfiddle if it helps: http://jsfiddle.net/UmKXy/ I'd like option one and two to remain selected and in the list when user begins to type.
Thanks for help!

The solution you had would not work with selected elements because he created an array of options at the start and then matched those options against the regex(Without regards to what is actually selected). I've used spans to hide options in the past and created an example for you to see how it works. Here is the link : http://jsfiddle.net/rD6wv/
Here is the code
$(function() {
$("#filterByText").bind('keyup',function(){
var search = $.trim($(this).val());
var regex = new RegExp(search,"gi");
$("#filez").find('option').each(function(){
if(!$(this).is(':selected')){
if($(this).val().match(regex) === null) {
$(this).wrap('<span>');
}else if($(this).parent().is('span')){
$(this).parent().replaceWith($(this));
}
}
});
});
});
You simply need to loop through all the options of the select when you type in the textbox.
You then check if it is selected, if it is you do nothing, else you check if it matches the search filter, if it does you wrap it in a span, making it invisible, else it means you need to see it, so you check if it is already wrapped in a span, and in that case you replace it with the option so you can see it again.

to selected the non selected options, use this:
$('option:not[selected]') or $('#myselect > option:not[selected]')
to remove them, use this:
$('option:not[selected]').remove();
in css, :not filters for opposite of what comes in the curved brackets.
and [] is attribute selector.
so :not[selected] means: does not have an attribute whose key is "selected"

jquery, javascript, update dropdown list options upon focus but retain selected value

Brain not working right now. Someone help me fill in the blanks here.
Need to select the currently selected value, repopulate the options, and then select the previous selection if it's still in the list.
To make it easier, the new value and previously selected value will have the same name attribute assuming it's still in the list after updating, and names will always be unique for the list of options.
//assume Options is a globally defined var for this example with format:
// [{"display":"something", "value": "something's value"}, etc.. ]
function LazyLoadOptionsIntoSelect($select, options)
{
//get current option
//repopulate options
$select.html("");
$("<option>").text("--Select a File--")
.appendTo($select);
$.each(options, function()
{
var item = this;
$("<option>").attr("name", function () { return item.display; })
.val(function () { return item.value; })
.text(item.display)
.appendTo($select);
});
//select previously selected option if still in list
}
$(".lazyloadedselect", "#context").live("focus", function()
{
LazyLoadOptionsIntoSelect($(this), Options);
});
EDIT: mistake in my code, unrelated to the problem, but still wrong

If the option retains the same value attribute:
//get current option
var theOption = $select.val();
And later...
//select previously selected option if still in list
$select.val(theOption);
EDIT
You'll need to fix an error in your population code because none of those options actually have value attributes, which is probably why you can't properly set the value of the select:
$.each(options, function(index, item) {
$("<option>")
.attr("value", item.display)
.text(item.display)
.appendTo($select);
});
Please note name is not a standard attribute for an option element.