Develop Reference

Programmatically set the text of a select - jquery

I need to programmatically set an option of an existing select box when I only know the text of the option and not the value.
Here is my code:
$("#" + eventQuestions[x].code).find('option[text="' + eventAnswers[x].vAnswerString + '"]').attr("selected");
Don't focus too much on selecting the right html element or the right text being inside the vAnswerString - I can confirm those are correct.
Basically the option is not being selected. What is wrong with my code?

Check out this answer.
You can use that filter to check the inner text and then you put the selected attribute like this:
.attr("selected", true);
Example I tested it with:
$(function() {
$("#select").find("option").filter(function() {
return this.innerHTML == "InnerText";
}).attr("selected", true);
})

Here is a working example for jquery 1.6+.
Select the option using the filter function:
var text = "theTextToFind";
var matchingOption = $("select#myselect option").filter(function () {
return $(this).text() == text;
});
Set the value using the property function:
matchingOption.prop('selected', true);
Also check out this Answer.

Using custom attribute jQuery selectors with dropdown select (take 2)

This issue is making me want to smash my computer. I have a form, I want to calculate values from selections on the form. I have two jsfiddles here, I really want to have it so I can make selections, then calculate on click. But I can't even get the form to work on click. So the other fiddle uses on change and keyup functions. There is an issue on that form as well. If you change the first select to "option 2", you'll see the value for that select ends up being "1.379999999996" instead of "1.38". Why is this happening?
Fiddle with click function
JS:
$('#submit').click(function(){
var price=$(this).find("option:selected").attr('data-price');
var ink=$('#ink').val();
var loc1=$('#loc1').val();
var res= price*1 + ink*1 + loc1*1 ;
$('#bleh').val( res || 0 );
});
Fiddle with change and keyup functions
JS:
$('#ink, #loc1, .sel').on('keyup change',function(){
var price=$('option:selected', this).attr('data-price');
var ink=$('#ink').val();
var loc1=$('#loc1').val();
var res= price*1 + ink*1 + loc1*1 ;
$('#bleh').val( res || 0 );
});

Your selector $(this).find("option:selected") is wrong as this here points to the #submit button, so you need to find out the select element using its id #style
$('#submit').click(function(){
var price=$('#style').find("option:selected").attr('data-price');
var ink=$('#ink').val();
var loc1=$('#loc1').val();
var res= price*1 + ink*1 + loc1*1 ;
$('#bleh').val( res || 0 );
});
Demo: Fiddle

Change the style of the drop down

I have a 4 drop down list based on each drop down value the other drop down will change i tried to change the style of the drop down list using CSS and jquery and javascript.
I almost got the style of the drop down and the functionality also works fine, but where i am stuck is
In the jquery what is done is
$(document).ready(function(){
$("select").each(function(){
$(this).wrap('<div class="selectbox"/>');
$(this).after("<span class='selecttext'></span><span class='select-arrow'></span>");
var val = $(this).children("option:selected").text();
$(this).next(".selecttext").text(val);
$(this).change(function(){
var val = $(this).children("option:selected").text();
$(this).next(".selecttext").text(val);
});
});
});
so for all the select it automatically wraps with div and after that the 2 spans are placed.
So when i change the value on the 1 drop down for the first time the values of the 2nd drop down is changed .
When i again change the value of the 1 drop down the 2 drop down values does not reset to the default value.
Because the span hold the value of the previously selected value.. How can i overcome this.

Have you tried like this:
$(document).ready(function(){
$("select").each(function(){
$(this).wrap('<div class="selectbox"/>');
$(this).after("<span class='selecttext'></span><span class='select-arrow'></span>");
var val = $(this).children("option:selected").text();
$(this).next(".selecttext").text(val);
});
$("select").change(function(){
var val = $(this).children("option:selected").text();
$(this).next(".selecttext").text(val);
});
});

How the select the multiple Table data as per selected checkbox?

There is one data table with two rows, as per below image
When user click on 2bit it should highlight that TD in that column only. I achieved this using jQuery for one check box selection, but when multiple check box selection like 2 and 4 it should highlight both the TD.
http://jsbin.com/exazoh/edit#preview working example for single value highlight.
Code: http://jsbin.com/exazoh/2/edit

Try the following function:
jQuery(function() {
// on change of an input with a name starting with "bit-select"...
jQuery('input[name^="bit-select"]').change(function(){
var checked = this.checked,
val = this.value,
column = $(this).closest("th").index() + 1;
// for each td in the current column
jQuery("#tableData tr.data td:nth-child(" +
column + ")").each(function() {
var $td = $(this);
// does the current td match the checkbox?
if ($td.text() == val) {
if (checked)
$td.addClass("jquery-colorBG-highLight");
else
$td.removeClass("jquery-colorBG-highLight");
}
});
});
});
I had to add the value attributes to the second set of checkboxes.
Working demo: http://jsbin.com/exazoh/4/edit#preview
Or the short version, since I notice you were using .filter() originally:
jQuery(function() {
jQuery('input[name^="bit-select"]').change(function(){
var method = this.checked ? "addClass" : "removeClass",
val = this.value;
jQuery("#tableData tr.data td:nth-child("+($(this).closest("th").index()+1)+")")
.filter(function(){return $(this).text()==val;})[method]("jquery-colorBG-highLight");
});
});
Demo: http://jsbin.com/exazoh/5/edit

jquery- unable to access individual elements that are part of list/select box in a web page form

I am trying to access each individual element, ie option, defined for a list box (or drop down box).
For some reason the code I am using is not working. It is given below---
$(jQuery('input', $(this).parent('form'))).each(function() {
element= $(this);
textmsg=" Element # " + (count+1) + "...Name of this input element = " + $(this).attr('name') + " multiplechoice-" + $(this).attr('multiple');
textmsg= textmsg + "...Also, for this element, the value is " + $(this).val() + " and type =" + $(this).attr('type');
alert (textmsg);
var listofoptions = new Array();
type=$(this).attr('type');
if(type=="select")//this means we have to go through the children for this select element, to obtain the values for each option
{
var elements= $('option', this);
for(var i=0; i<elements.length; i++)
{
// add $(this).val() to your list
alert("Value of this option=" + $elements[i].val());
});
}
});
How do I make the above code work? Or can you suggest an alternative way of accessing each option value? Thanks...

In order to select all inputs you would need to use the :input selector and not just $('input') as this will select inputs by tag name and the select will be excluded.
So do
$(this).parent('form').find(':input')
Also, since there's no type attribute on a select element. You could use .is() instead to check if it's a select.
$(this).is('select')
Edit: for the if statement i would do the following
if( $(this).is('select') )
{
$(this).find('option').each(function(){
alert( $(this).val() );
});
}
Here's a fiddle

the select tag is not an input so it would never be a part of the selection
You could try
$("input, select")