How to set option selected when using jqtransform on select element - javascript

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

Related

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.

Get selected index of dropdown from array Jquery

I am saving all inputs in a form in the form of array into a variable.
Example: var data = $('inputs,select')
Now, I want to get selected index of dropdown using variable data.
Please help.
Edit: Added Fiddle for reference
Fiddle
If I have understood your question properly, you save a jQuery object with every input and select in a variable­. To get the selected index of a dropdown you would have to iterate over your variable to find out if its a select or a regular input, and then get its selected index.
//loop over every dom element in the variable
data.each(function () {
//if its a select
if ($(this).is("select")) {
//find its selected index using native DOM and do something with it
$(this)[0].selectedIndex;
}
});
You probably want to add $( "select option:selected" ).text(); to select the selected item.
This was from: http://learn.jquery.com/using-jquery-core/faq/how-do-i-get-the-text-value-of-a-selected-option/

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

jquery doesn't find a selected node after populating selectbox

var opt = new Option('test','test', true, true);
$('#country option:selected').selectedIndex
So i've populated the selectbox, and jQuery can't find the selected option using the script below, why is that?
$('#country').find('option:selected')....
You are trying to call selectedIndex on option instead of select. You need dom select object to call selectedIndex not the jQuery obejct. Use the id selector to get the select jQuery object and then use indexer to get the DOM select object to call selectedIndex on it.
$('#country')[0].selectedIndex
or using javascript
document.getElementById('country').selectedIndex
To get the selected option option:selected and to get the index of selected option you can call index()
$('#country option:selected').index()

Categories

Resources