We Keep Coding

How to get the currently selected option of a dom modified select box?

I'm using a fake select box in my script which means the original select box is hidden and for styling purposes a ul is showing up. Whenever the selected value of this list changes the orginal select box does too.
There is a change function for that. Within that function is following code:
var el = $(e.currentTarget) ;
$('#my_select_box').children().removeAttr('selected');
$('#my_select_box option[value="'+el.attr('data-value')+'"]').attr('selected','selected');
After that change I want to retrieve the new selected value of the original select box in another function.
But the normal selector only gets the original value, not the new:
$('#my_select_box option:selected').val() //returns the wrong value
So how to I get the new value in the function I need it?
I tried this function:
$("#my_select_box").bind("DOMSubtreeModified", function() {
console.log($(this).find('option:selected').val());
});
It returns the correct value but not where I need it. So how can I retrieve the correct select box value out of the domtree live?
Thanks in advance!

instead of .attr('selected','selected');, try .prop('selected', true);

print the count and the value of selected options inside a text box with jquery

i wanted to make a script to parse the count of selected options from a dropdown list.
I tried my code to jsfiddle but it doesnt work, even if i dont get any syntax error.did i do something wrong ?
$(document).ready(function(){
var count=$("#jform_params_foreignmanuf:selected").length;
$("#jform_params_manucounter").val(count);
});
http://jsfiddle.net/aewsduwo/22/ .
Also if i wanted to make a text area and print the value of the dropdown option?
$(document).ready(function(){
var $val= $("#jform_params_foreignmanuf:selected").val;
$("#jform_params_manucounter").val($val);
});
http://jsfiddle.net/pvpqd286/6/ i think this, for the first option in my example
<option selected="selected" value="127">1</option>
would ouput "127" instead of "1" that i want to print right?

Couple of things:
1) You need to escape special character present in id tag.
2) You need to find option by selected attribute and not select element as selected
$("#\\#jform_params_foreignmanuf :selected").length
Demo for selected option count
and for getting selected elements value in textbox as comma seprated string:
var count=$("#\\#jform_params_foreignmanuf").val().join(",");
$("#jform_params_manucounter").val(count);
Demo for selected value
Update: for getting first selected option text:
var firstselectedtext=$("#\\#jform_params_foreignmanuf :Selected:first").text();
$("#jform_params_manucounter").val(firstselectedtext);
Demo for first selected option text
for getting all selected options text:
var selectedtext=$.map( $('#\\#jform_params_foreignmanuf :Selected'), function (element) {
return $(element).text()
});
$("#jform_params_manucounter").val(selectedtext.join(','));
Demo for getting all selected options text

if i wanted to make a text area and print the value of the dropdown option?
Then you can do this:
$(document).ready(function () {
var $val = $('select[id="#jform_params_foreignmanuf"] :selected').text();
$("#jform_params_manucounter").val($val);
});
As your select element contains a special character of # so either you can escape it with \\ or you can make an attribute selector like above.
would ouput "127" instead of "1" that i want to print right?
For this you just need to use .text() instead of .val().
Checkout the demo.

You can try this one:
$("#jform_params_foreignmanuf").on('click', function(){
var count = $("#jform_params_foreignmanuf option:selected").length; //count selected options
$("#jform_params_manucounter").val(count);
var val= [];
$("#jform_params_foreignmanuf option:selected").each(function(){
val.push($(this).text()); //save each selected text in array
});
$("#jform_params_manuvalue").text(val.join(',')); //write selected text to textarea (comma-seperated)
});
Demo

How can I add only unique options in multiple select tags which are in same class?

I need to dynamically add options to the select tags. Those options I will be fetching it from a file. There can be many selects in the form. Now I need to check all the selects whichever is in the same class If it doesn't have the option which I fetched from the file Then I need to add that option to that particular select.
var name = $(this).attr('name');
$('.slct').each(function(){
if($('this option[value="'+name+'"]').length==0)
{
$('<option>').val(name).text(name).appendTo(this);
}
});
When I tried the above code, Options are getting duplicated. For example I have 3 select tags. In the first tag I have an option called option1 remaining two tags are empty. Then after the execution of this code. First select tag contains the option1 twice and the remaining two tags contain only once. Can Someone tell me how do I do it ? I am new to jquery.

You can use find() to check if option with specific value exists in the select this way:
if($(this).find('option[value="'+name+'"]').length==0)
{
$('<option>').val(name).text(name).appendTo(this);
}
FIDDLE DEMO:
http://jsfiddle.net/3Lkv638x/1/

Jquery change() dont work on select box when contain only one item

I'm working on a dynamic select box with php and jquery, i have 4 select boxes, the content of the first one is loaded in the page load.
When i choose one of the items in the first select box, the seconde one get data from database related to the first select box...and so on
But the problem is : when the select box contain only one item, the change() function of jquery doesn't work $('#MySelectId').change(function(){ //......});
Any suggestions ?
I'm working with PHP, jQuery v1.6.4 and jQuery Chosen Plugin.

If your select box only contains 1 item this item is already selected so if you select it again the value doesn't change so no change event is fired. Add a placeholder like "Please select item" or something which is selected by default.

Try something like
$('#MySelectId').on('change', 'select', function() {
alert('changed');
}).click(function(){
if($('#MySelectId select option').length == 1) {
$('#MySelectId select').change();
}
});
Fiddle
or you can try with jquery bind if you are not using 1.7.x + version.
$('#MySelectId').bind('change', function() {
alert('changed');
}).click(function(){
if($('#MySelectId select option').length == 1) {
$('#MySelectId select').change();
}
});
test here
check this post also

option:selected not triggering .change()

I have a dropdown box that has a list of institutions in it. Now if I manually select an option, it works and I am able to grab the correct value.
However, I have a select rates button which uses JavaScript to pull up a rate sheet. You select a rate from that sheet and it will select an option from the dropdown for you (one that corresponds with the rate from the rate sheet). If I use this method, it doesn't trigger a .change() therefor I can't get a value for the selected option.
$('#id_financial_institution').change(function () {
var value = $("#id_financial_institution option:selected").text()
$("fi").text(value);
});
Any suggestions? I have tried .change() and .click() but nothing.

Once you are in the change function you don't have to do another search or selector because you already have the object you just have to find the selected option from it. So you can try this:
$('#id_financial_institution').change(function () {
var value = $(this).find("option:selected").text();
$("fi").text(value);
});
If the code still doesn't return you answer start to add alerts at each point to see where you are and what values you have and work your way from there?

Rather than .text() use .val()
$(function() {
$('#id_financial_institution').change(function () {
var value = $("#id_financial_institution option:selected").val()
alert(value);
});
})
Here is a sample demo, without your html. I am just alerting the value.
DEMO

You're going about this all wrong. You already have the select element in this, all you need is the value of that select element.
$('#id_financial_institution').change(function () {
var value = $(this).val();
$('#fi').text(value); //i assume `fi` is an [id]
//do more stuff
});

I went inside my AJAX call and got the value of the fields I needed there. For some reason, when using the AJAX call, it wouldn't fire the .change() on that particular field.
Thanks for all your input everyone.