Develop Reference

Remove option dynamically from jQuery Chosen

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.

Jquery how to select option with value

I have a variable defined in my code as follows:
var select = $('.selMake');
and I want to select the option that has the value "placeholder". How do I select the option using the variable? I need to change the html of the option that has the value "placeholder"

Try
$("select.selMake").val("placeholder");
Using the variable:
var $select = $('.selMake');
$select.val("placeholder");
It's usually good practice to use the $ prefix when indicating a jquery object.
Edit based on comment:
Try
$select.find('option[value="placeholder"]').text("newText");

What do you mean by "select" and "options"? is it dropdown select HTML?
If so, you can try using code below to select the option that have value of placeholder:
var select = $('.selMake');
//select the option that have value of placeholder
var optionWithPlaceholder = select.find("option[value='placeholder']");
//you can do anyting here
optionWithPlaceholder.html("after edit");
I tried that code here: http://jsfiddle.net/Lg67qcj1/

How to insert selected element from multiple selection into an input?

hi everyone i have a problem.
i have a multiple selection and i want to select something and put it into an input through a button i hope i have been clear :
i manage to get the select item with this jquery code :
var chosen= $('#droite option:selected').val();
droite is an id for the multiple selection
and i want to put it into the input wich has an id : chosen item here is my jquery code:
$("#chosenitem").prepend(chosen);
and it won't work do you have any idea why .?

You need to call val() on the select itself, not the options it contains:
var chosen = $('#droite').val();
Similarly, to set the value of the #chosenitem input, use val() with a parameter:
$("#chosenitem").val(chosen);
Note that if multiple options are selected in the #droite element, the value returned will be a comma delimited string, eg. foo,bar,baz.

You should call val() to set the value of #chosenitem
$("#chosenitem").val(chosen);

Use jQuery to set select box value to first option

I am dynamically populating a select box with options. When I do this, I want the value of the select box to be the value of the first option (a 'default option', if you like). Sounds really simple, but I just can't get it to work.
var myElement = $('select[name="myName"]');
.... tried the following three variations
// myElement.find('option').first().prop('selected', 'selected');
// myElement.val(myElement.find('options').first().val());
myElement.prop('selectedIndex', 0);
...but the following line gives a blank alert
alert(myElement.val());
Where am I going wrong?

options should be option
myElement.find('option:eq(0)').prop('selected', true);
You can use the eq selector on the option to select the first option.
If you know the value of the first option. Then you could simply do
myElemeent.val('first value') // Which selects the option by default
The 2nd case you tried should work, unless you are not calling at the right point . i.e; waiting for the ajax response to be completed.
Try calling that inside the done or the success (deprecated) handler

You almost got it, drop the 's' in 'options':
myElement.val(myElement.find('option').first().val());
Working jsFiddle

You could also use next code:
myElement[0].selectedIndex = 0;
This get's the Dom element (not jQuery object), works with vanilla Javascript and uses it to set the first option as the selected one based on it's index.

If you want to be sure that your option has a value and is not a placeholder you can do:
$('select option').filter( function (index, option) {
return option.attributes.value
}).val()
That way you'll check if the HTML node has attribute value and is not empty.

How to set option selected when using jqtransform on select element

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 :)