Remove items multi select with optgroup in jquery - javascript

Is there a way to clear all option and optgroup HTML elements by using jquery?
My HTML select element is like this,
<select id="users" name="multiselect" multiple="multiple" style="width:382px;" >
<optgroup id="groupadmin" label="Group Admin"></optgroup>
<optgroup id="systemusers" label="System User"></optgroup>
</select>

You can use .empty()
Description: Remove all child nodes of the set of matched elements from the DOM.
Code
$('#users').empty()
Fiddle
EDIT
As you are using multiSelect plugin, You need to use .multiSelect('refresh') method.
$('#users').empty().multiSelect('refresh');
Updated Fiddle

Try this code
$('#users').find('optgroup,option').remove();

Use the following code :
$('#users').children().remove();
This will work irrespective of whether an optgroup is present or not

Related

Select option with cheerio (jquery) by text

I'm trying to select an option from a select dropdown with the text() attribute of the HTML element with cheerio. So far what I'm doing is that I'm trying to set the attr as selected matching, the element with the specific text.
This is what I'm trying:
$('#ddl_city option[text="testing"]').attr('selected', 'selected');
I'm not getting any changes on the html when I do this. I print the html document on the console after doing this operation and I don't see that the option has changed to the one I'm selecting. Any idea why is not working or another workaround?
You can try this:
$('#ddl_city option').
filter(function () { return $(this).text() == 'testing'; }).
attr('selected', true);
Credits to Godsbest's answer in this post on the jQuery forum.
You can use the :contains filter to get the specific option element based on the text and set the value of the select element to it's value:
$('#s1').val($("#s1 option:contains('Val B')").val())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="s1">
<option value="a">Val A</option>
<option value="b">Val B</option>
</select>

Selecting an option using fancy select

I've got a fancy select with code similar to the following, yet adding the selected=selected attribute to one of the options (with JS) does not change which item is currently selected.
<li class="field">
<div class="picker">
<select>
<option value="#" disabled>Favorite Doctor…</option>
<option>Colin Baker</option>
<option>Sylvester McCoy</option>
<option>Paul McGann</option>
<option>Christopher Eccleston</option>
<option>David Tennant</option>
<option>Matt Smith</option>
</select>
</div>
</li>
How can I change the selected option and have this change reflected in the select box.
Try to trigger the change event after you set the selected option, for example:
$('option:eq(2)').prop('selected',true).trigger('change'); // or .change()
Fiddle Demo
Solved it by setting the select.val() to the text of the option I'm trying to select.
I solved it by mending FS's code. It was using :selected as a selector. Changed it to [selected="selected"] and it behaved. Best to just avoid FS completely though, in my opinion. I inherited it on a project I'm working on.
Around line 56 in my copy, now changed to:
triggerHtml = settings.triggerTemplate(sel.find('[selected="selected"]'));

jQuery UI MultiSelect are selecting all <select> in the page

I'm using the plugin jQuery UI MultiSelect http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/.
But I want just one <select> determinated by me to be multiple!
I alrealy have others <select> on my page (simple selects), like this:
<select name='simple_select' id='simples_select'>
<option value='1'>Option 1</option>
</select>
And, for the multiple <select>:
<select multiple="multiple" name='multiple_select' id='multiple_select'>
<option value='1'>Option 1</option>
</select>
When I change this function from "select" to something else, (like "div") all the divs stay "multiple". So, like this function (downloaded from the plugin site), all the <select> will be multiple... and I just one specific.
<script type="text/javascript">
$(function(){
$("select").multiselect();
});
</script>
Anyone have any idea how can I make it? Thanks for reading and I'm sorry about the terrifying english (I'm brazilian). ^^
Try using :not() to exclude a select you don't want calling it's ID inside :not()
$(function(){
$("select:not(#simples_select)").multiselect();
});
Demo
Or just use the ID selector for the one that you want, since it has ID:
$(function(){
$("#multiple_select").multiselect();
});
Demo
Unless you specifically want to apply something across a group of tags or objects it's much better practice to use IDs. To apply the code to the specific ID use the # symbol with the ID.
You can learn about CSS selectors with jQuery here: http://api.jquery.com/category/selectors/
<script type="text/javascript">
$(function(){
$("#multiple_select").multiselect();
});
</script>
If you want to select all <select> use $('select') and if you only want to select a specific <select> use $('#mySelect').
See this link for more info

change value of dropdown menu <select>

If I say have the following element, how do I change the selected value in it dynamically from jquery? (I know there are alot of threads of this subject here and I have tried them but I just coudn't get it to work)
<div class="styledDropDown">
<form name="viewBeds" method="post" action="formhandler.cgi">
<select name="title" onchange="javascript:showHideBeds();">
<option selected value="All">All</option>
<option value="Hannes">Hannes</option>
</select>
</form>
</div>
I want to switch between these values so that the selected value becomes "Hannes" instead of "All".
How is this done easiest?
Trid the following without success
function showHideBeds(){
$('.styledDropDown').val('Hannes');
}
Hope you understood the question =)
You need to set the .val() for the select element, $('.styledDropDown') is a div
This will do
$('.styledDropDown select').val('Hannes');
Demo: Fiddle
You can do
$("select[name='title'][value='Hannes']").attr("selected", "selected");
You can change the current value with
$('#setSelectedOne').click(function(){
$("#title option[value='Hannes']").attr('selected',true);
});
But I do not understand why you would do that with Javascript as the browser has its own do deal with Select boxes...

how to select a select box which is not having any class

I need to select a select box which is not having any class name
Minute : <select name="dob_minute'+$i+'[]" class="" style="width: 56px">
<option value="">--------</option></select>
I can not select it by using name. I am having some other issues in it. That is the reason that I am not selecting by name
This will select any select element that has a name attribute that begins with 'dob_minute' so it doesn't matter what variables are added after that.
$('select[name^="dob_minute"]');
You can use the attribute selector:
$('select[class=""]')
You can locate the select using attribute equals selector like below,
For a select like below,
<select name="mySelect">
<option>...</option>
</select>
You can find the select using attribute equals selector below,
$('select[name="mySelect"]').val();
var select = document.getElementsByName("dob_minute'+$i+'[]")[0];
Use the select like this
$('select[name=dob_minute]').val()

Categories

Resources