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
Related
I am trying to show li items with a certain class in a second bootstrap dropdown based on the li item selected in the first dropdown.
$(document).ready(function() {
$('#mapContent').hide();
$('#mapCat').click(function(){
$("#mapContent").show();
$("#mapContent ul li .show1").hide();
});
})
The problem is the second ul is being show on click but all <li> items are being shown not just <li> with class of 'show1' while on click only <li class="show1">University X</li> should hide in the second dropdown.
Here is my fiddle
You have a space li .show1 which tells jquery to search for children of li but you want the li, remove it to get the li's
$("#mapContent ul li.show1").hide();
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 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 ;)
I have a drop down menu ul when I am on the page I would like to have the drop down menu stay so I want to show the ul item only if it has a li element with the class ".current-menu-item" in it. I found this code, but it would show all drop downs (.sub-menu) I only want to have the one with the ".current-menu-item" in it to be shown:
if ($(".sub-menu").find(".current-menu-item").length > 0){
$(".sub-menu").css('display', 'block');
}
How can I achieve this?
Simply use :has selector:
$(".sub-menu:has(.current-menu-item)").show();
I have a problem... I tried to remove the selected items from dijit.form.MultiSelect when I click on button, but don't work...
Here is the code:
btnRemove = dijit.byId("btnRemove"); // button ID
List= dijit.byId("List"); // ID List of items which I want
// to remove when click on someone item
on(btnRemove , "click", function(evt){ // onClick event
alert(dijit.byId("List").attr("value")); // returns a label of element
// here must be a code to remove a selected item from MultiSelect - but don't work...
List.containerNode.removeChild(dijit.byId("List").attr("value"));
});
all code is in Javascript..
thanks
I solved this problem... if any will need this:
because I didn't find that dijit.form.MultiSelect has a removeChild option, I used a another hidden dijit.form.MultiSelect in which move items from the first MultiSelect...
Code for this is:
btnRemove = dijit.byId("btnRemove");
on(btnRemove, "click", function(evt){
dijit.byId("Removed").addSelected(dijit.byId("List"));
});
where Removed is the ID of hidden MultiSelect and the List is ID of a visible dijit.form.MultiSelect
you can use below code for remove all elements
while (btnRemove.hasChildNodes()) {
btnRemove.removeChild(btnRemove.lastChild);
}