Jquery how to select option with value - javascript

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/

Related

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

Get the value form dropdown using Jquery

I use the following jquery function for get the drop down value in a table row.But its not give the value.
HTML
<select id='statusprocess'><option value='optSelected'>Selected</option><option value='optNotSelected'>Not Selected</option></select>
JQUERY
var select = $(this).closest('tr').find('input[type="select"]').map(function () {
return this.text();
}).get();
How to find the dropdown and get selected option text?
Answer Is:
This is the Exact way to find the dropdown in Table and get selected the Selected Text.
var select = $(this).closest('tr').find('select option:selected').text();
It was Working Fine Now.
Since you have the ID already, why don't you just get it via the ID?
$("#statusprocess").val();
The above statement returns 'optSelected' or 'optNotSelected'.
Or else if you were referring to the "option text" instead of the "option value", you can try this.
$("#statusprocess :selected").text();
The statement above returns 'Selected' or 'Not Selected'.
i think you can simply get it by
$("#statusprocess").val()
HTML
<select id='statusprocess' onChange="getIt()"><option value='optSelected'>Selected</option><option value='optNotSelected'>Not Selected</option></select>
SCRIPT
function getIt(){
var i=$("#statusprocess").val()
alert(i);
}
Depending on what you want to get, you can either get the value:
$("#statusprocess").val();
or the text of the selected
$("#statusprocess option:selected").text();
you can get the value of dropdown when the value changes. so use change method to get the value when option changes. JQuery Doc
$('input[type="select"]').change(function(){
var value = $( "select option:selected" ).text();
});
Update
you can just fetch the value by using the class also.
$(".selectboxClass").on('change',function(){
var value = $( ".selectboxClass option:selected" ).text();
});
There is no input[type=select] exist.
Your dropdown list is a <select> element, not an <input type="select" />. So you should use the select instead of using input[type = "select"].
Selected option value:
$(this).closest('tr').find('#statusprocess').val();
Selected option text:
$(this).closest('tr').find('#statusprocess option:selected').text();
Working Example
OR if you have single dropdown inside the tr, you can also use element selector (i.e select) this:
Selected option value:
$(this).closest('tr').find('select').val();
Selected option text:
$(this).closest('tr').find('select option:selected').text();
Working Example
This is the Exact way to find the dropdown in Table and get selected the Selected Text.
var select = $(this).closest('tr').find('select option:selected').text();
It was Working Fine Now.

How to select(fetch) all the <select> elements in jQuery

I want to fill in all the options for things like
<select id=such_a_field>
to get the inputs in my form I can just go
$inputs = $('#myFormName :input');
and iterate through them and set the value based on the id.
For my select field, which I am now upgrading from a simple input to restrict what the user can put in, I first want to go read the set of available options (from the DB, via ajax of course), and then set the right one based on what's in the DB. Unfortunately
$selects = $('#myFormName :select');
produces
Syntax error, unrecognized expression: unsupported pseudo: select
as of course :select isnt a pseudo selector. It would be enough just to extend my above :input selector and then enhance my field setting code to handle selects.
You are looking for
$('#myFormName select')
select is a tag, so you must query for it as it is. :selected will give you the selected options.
You need to use element selector
$selects = $('#myFormName select');
You want a collection of all select tag input within your form, do this:--
$selects = $('#myFormName select');

unexpected behaviour in option tag in HTML

I have the following code
<select id="part">
<option>noun</option>
<option>verb</option>
<option>adjective</option>
</select>
In the above code, I don't have any value attribute each option tag.
there is only text node.
when I access the option tag
$("#part").val(); I get what is selected in dropdown box. ie, "noun"
but when I access $("#part").text(), there is empty string.
but when I create, option tags dynamically in jquery for
<select id="part"></select>
using
var names=["noun","adjective","verb"];
for (var i =0;i<names.length;i++) {
var option=$("<option>",{
value:names[i],
text:names[i]});
$("#part").append(option);
}
Here the value is attribute is needed to get the option selected.
without value attribute, $("#part") is undefined.
can somebody explain the discrepancy here? of if my understanding is not correct. Thanks
Check here DEMO http://jsfiddle.net/yeyene/yH4Fb/
You need to get only the selected option text coz there are three options,
when you get $("#part").val(); you directly get the selected value (only one selected value). But when you get $("#part").text().. you are getting the text of the whole select text where you have three options and three types of text.
JQUERY
$(document).ready(function(){
var names=["noun","adjective","verb"];
for (var i =0;i<names.length;i++) {
var option=$("<option>",{
value:names[i],
text:names[i]});
$("#part").append(option);
}
$("#part").on('change', function() {
alert('Value is '+$(this).val());
var text = $("#part option:selected").text();
alert('Text is '+text);
});
});
$("#part").text() doesn't return nothing but it won't return what you expect (see this fiddle).
Explanation: text returns the text of the object strips out the html (see jQuery docs examples), so what you will be getting is the inner contents of the select after the html was stripped out.
If you want the text of the selected value, include the selected option in your jquery selector: i.e. $('#part option:selected').text() which uses the jQuery psuedo-selector (also in my fiddle).

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

Categories

Resources