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.
Related
For example i have 2 records pre-selected as seen in screenshot below.
I noticed that aria-selected="true" for selected ones.
How can I find it by title and remove/reset it so it will not be part of current selected items.
Thanks in advance.
I think this should work:
$('#idSelect option[title="myTitle"]').first().remove();
Hope it helps.
select2 has link to particular <select> element in DOM. So, first you need to change select option, and then trigger change event of select2
For change option text you can like this
<select id="mySelect">
<option value="option1">Text</option>
</select>
var $select2 = $("#mySelect").select2();
$('#mySelect option[value="option1"]').text = 'Another text';
And then trigger change event for select2:
$select2.trigger("change");
Remove item
$('#mySelect option[value="option1"]').remove();
$select2.trigger("change");
Select one option
$select2.val("option1").trigger("change");
Select multiple options
$select2.val(["option1", "option2"]).trigger("change");
Remove one from selected
If you need remove one option from already selected, you need to get selected options, remove one, and set new options to select2.
var sel = $select2.val(); // array
sel.splice(sel.indexOf("option1"), 1);
$select2.val(sel).trigger("change");
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/
How to set option selected when using jqtransform on select element.
I'm using jqtransform for my form , and I want to set appropriate option value to be selected when I'm retrieving saved data from database.
I believe you would set the value of select the same way as without using the jqTransform.
E.g.
$('#mySelect').val('myVal');
Edit:
Well, this is really ugly but should work:
var mySelect = $('#mySelect');
//find the current selected option
var myOption = mySelect.find('option[value='+mySelect.val()+']');
//find the index of that option
var index = $('#mySelect option').index(myOption);
//trigger the click on the corresponding jqTranfsform element
mySelect.prev('ul').find('li').eq(index).find('a').click();
You can call onchange event. jqtransform has change() method.
$('#mySelect').val('myVal').trigger('change');
It work's :)
I have a form which has a select list associated with the field players.
To populate the listbox, user clicks on a button on the form to display a popup and from that popup select players' names and then click another button on the popup which closes the popup and displays the selected values in the listbox.
By default, i put selected="true" in the select tag so that when user saves the form, the values in the listbox are saved.
<select size=5 id="sub_player_ids" name="sub[player_ids][]" multiple selected="true">
The above code selects all options in the selectbox and those options are highlighted in blue.
However it can happen that user deselects an option in the player's select box by error.
I would like all options in the select box to be selected by default - whether they are highlighted or not
Is there is a way to select all options in the select box by default when saving the form?
Thanks a lot for any suggestion provided.
Cheers
Do you know the values in the select? You can loop over the select and set each options selected to true.
for (var i = 0, children = select.childNodes, l = children.length; i < l; i++) {
if (children[i].tagName === "OPTION") children[i].selected = true;
}
Fiddle is using the fact that Chrome/IE7+ should define window.select as the element found in the DOM by the ID select. If you run this in Firefox you'll need var select = document.getElementById('select');
http://jsfiddle.net/robert/VKF4E/
It's a one-liner if you're using jQuery.
$("#sub_player_ids option").attr("selected", "selected");
Explanation: the syntax in the JQuery Selector uses CSS style to identify the "SELECT" (listbox) using the '#id' pattern and then following it with "option" selects all of the options within the named element. the "attr" function will add an attribute to each element returned. In this case we are adding the "selected" attribute and setting the value to "selected"
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.