Develop Reference

dynamically update select option on keyup in jquery

FIDDLE LNK for my 3 select option. What i want to do is when on document.ready the Continent will be populated and then the country of the active continent will be load on the country and then the city will be loaded depending on the country.
Also i have input text when the user type into the textbox that will be the value that will appear on the select as a selected option.

In your submit button click code, you have to append new option to the drop down instead of updating the value. So instead of this:
$('#continentselect').val(continent);
$('#countryselect').val(country);
$('#cityselect').val(city);
Try this:
$('#continentselect').append('<option>' + continent + '</option>');
$('#countryselect').append('<option>' + country + '</option>');
$('#cityselect').val('<option>' + city + '</option>');
Also you need to update your js arrays i.e. country, continent and city with the newly entered values from the text-boxes.

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.

JQuery to put select option text into an input

I am using this code here, it pulls out the selected option value from a drop-down box named "attribute[466]" then puts that value into an input field with the id of text_qty_
jQuery(function($){
var $idval = $('#text_qty_');
$('select[name="attribute[466]"]').change(function(){
$idval.val($(this).val())
}).triggerHandler('change')
});
What I can't figure out is how to get the text from the option selected rather than the value.
As an added challenge the select element that contains the drop-down box has a randomly generated ID attribute.

Find the selected option and read the text
var txt = $(this).find('option:selected').text();
JSFiddle

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

Select attribute not changed after change of select element

I have a table in which a few columns contains select elements. In the tfoot I have one input element for each row used for filtering the row based on the selected value in the select element.
When loading the table and directly filtering the columns with selects, than it works and the table is filtered.
But when making a change in the select elements, the filter function is not taking any notice that the value has changed.
Checking out the html I can see that the "selected" attribute is still on the option that was selected when loading. Hence, it doesn't get updated when making an actual changed (identified in both FF and Chrome).
But from jQuery, searching for the selected value (.find(":selected")) works. So I figure that I can use that to find the value and then set the selected attribute to whatever was selected. This is how I am trying to do it:
$("select[id^='qu_owner']").live('change', function (e) {
var owner = $(this).val();
console.log(owner);
var ticketid = $(this).attr('id').substr(9);
$($(this) + " option[value=" + owner + "]").attr("selected", "selected"); //Update: this has been removed
});
But the selected attribute is still not updated in the element.
Any clue how to do this? I need the filtering to work and it's looking at the selected attibute. Is it not possible to make this kind of update to the select element?
UPDATE
Ok, based on the comments and answers below I understand there are better ways of doing what I did above. So instead of using $(this).find(":selected").val(); I now use $(this).val();. Also, I did remove the last row since I understand one shouldn't try to set the selected attribute.
And also, I now understand that the code where I have the actual problem is the filter function. This is for DataTables so it's a plugin but this is the significant part:
aData[i] is the actual table cell. Hence, it's just text but in this case it's the text for my select element. I think below is heading in the right direction, but still not working (check comments next to console.log-rows):
function( oSettings, aData, iDataIndex ) {
var ret = true;
//Loop through all input fields i tfoot that has class 'sl_filter' attached
$('tfoot .sl_filter').each(function(i, obj){
//$(this) can be used. Get the index of this colum.
var i = $("tfoot input").index($(this));
//Create regexp to math
var r = new RegExp($(this).val(), "i");
//Get the selected option from the column
console.log($(aData[i]).attr('id')); //Properly prints the ID
console.log($(aData[i] + " option:selected").text()); //Prints all options, not only the selected on
console.log($(aData[i] + " option:selected").val()); //Prints the value of the id that was selected when data was loaded, even if a new option has been chosen
console.log($(aData[i]).val()); //Prints the value of the id that was selected when data was loaded, even if a new option has been chosen
var str = $(aData[i] + " option:selected").text();
/*Test to see if there is a match or if the input value is the default
(the initial value of input before it has any fokus/text) */
if(r.test(str) || $(this).val()=="Search"){
//Return true only exits this function
return true;
}else{
/*Return false returns both function an .each. Retain 'false' in a variable scoped
to be reached outside the .each */
ret = false;
return false;
}
});
//Return true or false
return ret;
}
It is the text for the selected element I need to get hold of. That's what should be filtered upon. How can I do that?
Update
To narrow it down, I have created a jsfiddle with what's necessary. It's all about how to extract the text from the selected option: jsfiddle
aData[i] = the table cell. In jsfiddle, i use "sel" as variable for the content of the cell. The text for sel is copied form aData[i].

There's no need to change the attribute of the <option> - that's supposed to contain the original state of the element as it was downloaded from the server.
Your filter should be checking the selected property of the chosen option, e.g.:
.filter(function() {
return this.selected; // check the boolean property
})
This is also how the :selected pseudo-selector works - it checks the current value of the property, not the attribute.
Note that in the change handler for a <select> element, you can just use this.value to get the currently selected value.
$('select').on('change', function() {
// current value
var value = this.value;
// text of the currently selected option.
var text = this.options[this.selectedIndex].text;
}