I have a bootstrap multiselect html element that i fill with data from a web service call that gets a list of regions in New Zealand. I need to load those options into the <select> and not select the top option by default.
I have tried everything that is done via the bootstrap multiselect built in functions and options. Nothing will work. So i am resorting to vanilla javascript or vanilla jquery to go straight into the plain html and deselect the first option.
All work on this can be done in this jsfiddle
I had to copy paste a minified external resource (xml2json.min.js) into the top of the javascript editor because it wasn't playing nicely when I tried to add it as an external resource.
I have tried this:
$("ul.multiselect-container").find("li").removeClass("active");
And it doesn't work. It removes the active class but doesn't deselect the option. How do I deselect the option?
I have tried this:
$("ul.multiselect-container").find('input[type="radio":checked]').prop('checked', false);
It doesn't deselect the option.
Please see if you can deselect the top option of the select.
So the jsfiddle at url same as above but ending in 182 is my refactoring to try and make it easier for people to understand but it didn't end up working correctly on my friends laptop.
When using the plugin as a <select multiple=true> it doesn't select the top option by default. However I need that same behaviour with a normal <select>
I just had a look in the plugin, And here is what I understood, To remove default selection you must have your selection set as multiple='multiple', This is when you can see a Checkbox in the drop down rather than radio buttons.
If you do not put this multiple option set then you will end up in having a radio button and this will set the first value by default. Here is the Fiddle which doesnt not select any default value. I just added the option multiple='multiple' to your dynamic select tag.
To have the option multi select set and also be able to select only one at a time use the below code. You need to replace your code block with this one
$("body").prepend("<select id=\"a-select\" multiple='multiple' >"
+ optionsText +
"</select>");
$('#a-select').multiselect({
on: {
change: function(option, checked) {
alert('sdd');
var values = [];
$('#a-select').each(function() {
if ($(this).val() !== option.val()) {
values.push($(this).val());
}
});
$('#a-select').multiselect('deselect', values);
}
}
});
Logic taken from http://davidstutz.github.io/bootstrap-multiselect/#further-examples, see the 5th example from here which says Simulate single selections using checkboxes.
I have redefined the method "deselect" as follows.
this.deselect = function() {
$('input[type="radio"]:checked').attr('checked', false);
$(".multiselect-selected-text").text("None selected");
}
JsFiddle Demo
Add an empty option to the top of the select element.
Related
I am using chosen.jquery to convert my select to multiple select. When I remove the current options from my select field and load the new ones, I am not able to select the newly added options.
I debugged and noticed that at following line from Chosen.Jquery.js the selected option is unselected.
if (this.is_multiple || this.form_field.selectedIndex !== this.current_selectedIndex) {
this.form_field_jq.trigger("change", {
'selected': this.form_field.options[item.options_index].value
});
}
I execute following code after I remove the options from the list.
$('#partnerCasteId').trigger("liszt:updated");
I just noticed that liszt:updated option is not present in the Chosen.jquery.
Do I need to get a different version?
Please help
I am showing option with chosen plugin and latter add option to it.
I am trying below
<select id='one'>
<option>a</option>
<option>b</option>
</select>
and calling chosen plugin
$('#one').chosen();
it working fine now i am remove chosen part and adding new option to select box
$('#one').append(' <option>g</option>');
$('#one').addClass('abc').attr('id', '');
$('#one_chosen').remove();
$('.abc').attr('id', 'myid');
$('#myid').chosen();
as you can see that i have added id by class and calling chosen() on it but this time its not working. And i can not keep id one in select box if there is no chosen
jsfiddle
You must clone the element in order to make it work:
$('#one').chosen();
$('#one').find('option:first').remove();
$myid = $('#one').clone().attr('id', 'myid').insertBefore('#one');
$("#one, #one_chosen").remove();
$myid.show().chosen();
Updated demo
i am not sure i understand your question. But you can refresh chosen with .trigger("chosen:updated"); i.e you can do something like
$('.select-chosen').chosen();
$('#one').addClass('abc').attr('id', '');
$('.abc').attr('id', 'myid');
$('.select-chosen').trigger("chosen:updated");
Update:
Ideally, if you want to fully change the select chosen, it is better to just hide and show new select chosen. In case, if you want to add or remove option from select and want to gain fully functionality of chosen you can do it easily with
// add custom option
$(".select-chosen").append('<option>Custom Option</option>');
// remove existing option
$(".select-chosen option[value='a']").remove();
Refer : http://jsfiddle.net/qubkhtsc/5/
Here is the fiddle http://jsfiddle.net/Dano007/b11xarpp/5/
To be clearer. In the drop down box, I'd like two options (text). when the user clicks one of these options the relevant function results are returned. Like see when clicking the buttons, which are for example only.
I've added the drop down box, but cannot see how to bind the results from the two queries to it.
Could I use something like ?
$("select#FriendsConnected option.filter-prop2").show();
$("select#FriendsConnected option.filter-prop1").show();
Feel like I've hot a brick wall with this and ideally would like some help with the fiddle to move past it.
In your HTML, change select id to a valid css id, something like: s_FriendsConnected
<select name="huge" class="btn-group select select-block mbl select-multiple" id="s_FriendsConnected">
In your Javascript, change the select = getElementByID(FriendsConnected)'s ID to your new select id: s_FriendsConnected
var select = document.getElementById("s_FriendsConnected");
This solves it on my local machine... will update with the jsfiddle in a while..
EDIT:
Here's the jsfiddle. : http://jsfiddle.net/b11xarpp/7/
UPDATE:::
As per your requirement, in this new jsfiddle, I've removed the buttons and placed option tags with values in the html.
In Javascript, I've removed the var select = document.getelementbyid() function.
Also, I've replaced your click functions for the buttons with on Change event to the select menu:
$('select#s_Friends').change(function(){
var selection = $(this).val();
if(selection=='f_connected')
FriendsConnected();
else if(selection=='f_requests')
FriendsPending();
});
That's mostly all. Here's the updated jsfiddle: http://jsfiddle.net/b11xarpp/8/
I am using jquery chosen on 4 select boxes that are being populated via database.
The select box ids are: #Year_395, #Make_395, #Model_395, #Trim_395.
I am using the following script to "cascade" them so that the second select box's options depend on what option has been selected in the first, the options for the third are dependent on the second selection etc.
function cascadeSelect(parent, child){
var childOptions = child.find('option:not(.static)');
child.data('options',childOptions);
parent.change(function(){
var parentValue = (this.value).replace(" ", "_");
childOptions.remove();
child
.append(child.data('options').filter('.sub_' + parentValue))
.change();
})
childOptions.not('.static, .sub_' + parent.val()).remove();
}
The native select boxes are cascading correctly. The problem is that when I implement jQuery Chosen, the new select boxes update, but do so one step behind the native boxes. For now I am using the below code to update the options for jQuery Chosen's replacement select box display. This should cause jQuery Chosen to update #Trim_395 as soon as an option for #Model_395 has been selected.
$("#Model_395").chosen().change(function(){
$("#Trim_395").trigger('chosen:updated');
});
Here is the link to the build site:
You will see that if you select your year, make, and model, no trim options will be available, as if you have yet to select the model. If you then select another model, the options for the first model you selected will be displayed. Selecting a third model will display the trim options for the second, etc.
I figured it out on my own. jQuery Chosen was updating before the hidden select boxes had time to update so:
$("#Model_395").change(function(){
wto = setTimeout(function() {
$("#Trim_395").trigger('chosen:updated');
}, 500);
});
Solved the problem. Thanks to anyone who looked :)
I'm using tablesorter and the filter widget. I found this jsfiddle example that allows filtering entries with a select box (Filter by age). I want to add that select box to my example, but it doesn't work when simply adding
$(".selectAge").bind('change', function (e) {
var cols=[]
cols[3] = $(this).val()
$('table').trigger('search', [cols]);
});
to my example code. Would you please tell me how to get the select box to work?
My example code is a copy from the official example.
It was working, it just didn't look like it. The one problem with the select is that the "reset" option needed an empty string as a value:
<select class="selectAge tablesorter-filter" data-column="3">
<option class="reset" value="">Filter by age</option>
<option>>=25</option>
<option><=25</option>
</select>
Here is an updated demo (all I changed was the select and added the blue theme css).
Update: Just so you know, in the next update, you can just give that select a "search" class name like the other input, and be sure to include a data-column="#" attribute, and have it work automatically when you use bindSearch, so there would not be a need to add extra code:
$.tablesorter.filter.bindSearch( $('#mytable'), $('.search') );