I am using the multiselect plugin for bootstrap.
What the plugin does is take a dropdown(select) and adds checkboxes on every option so you can select more than one option in a select.
The thing I need to do in order to enable the multiselect on a select is just $("#selectThis").multiselect().end()
This is how a select with multiselect looks like in html.
select.hidden
.btn-group > button + (ul.multiselect-container > li, li , li)
I can add an onChange function like this.
$('#add-workout').find('[name="class1[]"],[name="movement1[]"]')
.multiselect({onChange:function(element){
console.log($(this))
}})
.end()
})
I need to select the .multiselect-container of the changed element but $(this) refers to the multiselect object.
You should be able to get the parent by calling $(element).parent().parent().siblings(".btn-group").find(".multiselect-container") instead of $(this), after all you are passing the current selected element as a function parameter ;)
Related
Hi guys I'm creating an asp.net mvc 5 application using database first approach. I wrote this code of jquery in my master layout ready function
$(document).ready(function () {
$("select").prepend("<option value=''>Select one</option>");
$("select option[value='']").attr("selected", "selected");
})
Now all of the select tags are having a 'select one' option. Now I'm facing a scenario in which I'm passing a value to a create function where I have to select a dropdown option who match with that value like if i pass the value item then the dropdown option having value item will be selected. I'm doing this with jquery.
Jquery code of selection is working fine but because I'm prepending 'Select one' its appearing on select list by default and in html I can see two options with selected property but browser is showing me select one because its on top in options.
One approach to fix this is to do this
$(document).ready(function () {
$("select .dropdown").prepend("<option value=''>Select one</option>");
$("select .dropdown option[value='']").attr("selected", "selected");
})
that all the select lists with a specific class name should have 'Select one' option but there are about more that one hundred select tags and I don't want to visit every page and add class to select tags.
Is there any way to apply such filter in jquery that don't apply this prepend to all of the select lists who have a specific class name. or any other related solution.
$("#select option[value='']").remove()
I removed the select one option and its started to work.
This works well to add an option dynamically to a jQuery chosen select box;
var select = $('select', editor.field('cms_module_system_tenancies.tenant_id').node() );
var newOption = $('<option value="'+tenant_id+'" selected>'+tenant_forename+' '+tenant_surname+'</option>');
select.append(newOption);
select.trigger("chosen:updated");
But, I can't figure out how to reverse the action and remove that newly added item the next time I trigger the select list.
Is there a reverse of select.append which would remove the option from the list?
Update jQuery Chosen Dynamically
Try this:
Remove all child nodes
$('#selectBox').empty().append('<option value="0">-- Select --</option>');
Here we are first emptying the select box and then appending a default "Select" option.
Remove a single child node
$("#selectBox option[value='option1']").remove();
Trigger chosen:updated after empty() or remove()
$('#selectBox').trigger("chosen:updated");
Hope this is helpful.
Check prepend this will insert first. reverse to append.
I have a ul containing a series of tabs with onclick() attributes, and I want to convert it into a select node with options instead of list items. Right now each tab has its own onclick() attribute, but it looks like a select node only has one onchange() attribute. How do I tell the select to run the js indicated by the selected option on change?
When the onchange event runs get the .value like you would for any time of form element and then run whatever javascript is appropriate.
document.getElementById('selectElement').onchange=function(e){
var ele = event.target || event.srcElement;//This would be the select element
var val=ele.value;
if(val=='option1'){
callFunction1();
}
else if(val=='option2'){
callFunction2();
}
//Alternatively you could set up an object for all your functions and call it like this
var actions={
option1:function(){},
option2:function(){}
}
actions[val]()
}
At the moment my code clones 3 dropdowns everytime you click the add button.
I managed to get it to copy the row exactly because before, the first dropdown would reset by itself but the other two would not so I was just wondering how to reset all 3 dropdowns?
It is easiest to see in this JSFiddle:
http://jsfiddle.net/jydqK/7/
So, if you change the first dropdown to agent and then click the + you will see the second row appears duplicated whereas I would like it to reset to tags, operands and values.
Any help greatly appreciated.
You can use removeAttr to remove selected attribute and then fire a change() event.
In your case:
dropdownclone.find('select.tags option:selected').removeAttr('selected');
dropdownclone.find('select.tags option:first').attr('selected','selected');
dropdownclone.find('select.tags').trigger('change');
Modified example: http://jsfiddle.net/ZF3mc/2/
If I understood your question, you want the duplicated row of selects to reset their values.
In this case you can just remove this:
dropdownclone.find('select').each(function(index, item) {
//set new select to value of old select
$(item).val( $dropdownSelects.eq(index).val() );
});
and replace it with:
dropdownclone.find('option').attr('selected', false);
Find all dropdowns in your clone. For each dropdown, check every option tags for a selected attribute and remove it. Something like this:
clone.find('select').each(function() {
$(this).find('option').each(function() {
$(this).removeAttr('selected');
});
});
Or better yet, find only the selected option tags using :selected filter before removing.
I have a select list that when the user selects an item it builds an li element on the fly, when the users clicks the li element, the li is removed. Below is the code that I currently have,
The below adds the li on select of an option
$('#sectors').change(function(e){
$('#selected_sectors').empty();
$(this).find(':selected').each(function(i,e
{$('#selected_sectors').append($('<li>').text($(e).val()));
});
});
The below removes the generated li
$('ul#selected_sectors li').live('click', function(){
$(this).fadeOut('slow').remove();
$('#selected_sectors').val($(this).text()).attr('selected', false);
});
What I am wanting is when an li is removed the select option with the same value as the li's text is also unselected?
You can select options based upon value like the following:
$("#sectors").val("0")
Or you can select based upon first option element
$("#sectors option").first().attr("selected", "selected");
Example on jsfiddle