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.

Filling a select box of a form using the text inside the <option> tags with CasperJS

I would like to fill the "Acheter un billet" form of this site : http://www.leguichet.fr/
This is what I've done so far :
var casper = require('casper').create();
casper.start('http://www.leguichet.fr/', function() {
this.fill('form#search_tickets', {'departure':'1', 'arrival':'2'}, false);
this.click('input[value="Rechercher"]');
this.wait(1000, function() {
this.echo(this.getCurrentUrl());
});
});
casper.run(function(){
this.exit();
});
The documentation says that fill() uses the value attribute to match against but I would like to use the text inside the option tags. For instance they have :
<option value="Montpellier">Montpellier</option>
<option value="Montpellier">Béziers</option>
Thus if I want to select Béziers I have to write 'departure':'Montpellier'.
Is there a way to use the text inside the option tags?

The easiest way would be to retrieve the element value of the option that you want to select and use that value later. It may be the case that during the subsequent selection another option is selected, but the value will be the same, so it should not make a difference:
var x = require('casper').selectXPath;
casper.start('http://www.leguichet.fr/', function() {
var textToSelect = "Béziers";
var value = this.getElementAttribute(x("//form[#id='search_tickets']//select[#name='departure']/option[contains(text(), '" + text + "')]"), 'value');
this.fill('form#search_tickets', {'departure': value, 'arrival':'2'}, false);
this.click('input[value="Rechercher"]');
this.wait(1000, function() {
this.echo(this.getCurrentUrl())
});
});
You can easily select DOM nodes with XPath by testing their text content with the text() function. Do the same thing for arrival.

Javascript set selected value of dropdownlist by text

I am using Jquery Datatables with inline editing. I have a hardcoded dropdownlist which is beeing created for each row dynamicly.
<select class="form-control edit-mode" id="Status">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
So to get the value of the currently selected item I use
var tr = $(this).parents('tr:first');
var status = tr.find('#Status').val();
And the value I want to set it to is in the label next to it. So I get the value of that with:
var stat = tr.find('#lbl_Status').html();
So how do I set the selected value of the dropdownlist to the stat variable?
I have tried using the other solutions I found on Stackoverflow but they are not working since I can't seem to get the whole element or something. Since .length is not working on the status element. And I cannot use the normal document.getElementById method since it can be multiple select lists with the same ID.
F.ex with this solution:
$(document).on("click", ".edit-action", function (e) {
var tr = $(this).parents('tr:first');
var stat = tr.find('#lbl_Status').html();
var status = tr.find('#Status');
for (var i = 0; i < status.options.length; i++) {
if (status.options[i].text === stat) {
status.selectedIndex = i;
break;
}
}
});
I get: Uncaught TypeError: Cannot read property 'length' of undefined

status is jquery object,Use:
status.find('option').length;
or convert to javascript object and use:
status[0].options.length
Demo

I solved this by just using this line instead of the whole for loop.
status.find("option:contains("+ stat +")").attr('selected', true);
Thanks for pointing out that it was a Jquery object which led me to the answer :)

jQuery onChange prop a value to inputs

I have a <select> drop down that I'm inserting into my HTML via jQuery. I don't have control over the HTML but I do have control over the JavaScript.
I'm trying to prop a value to an <input> element when you select an option. Basically, I have a <select> element with <option id="1"> and <option id="2"> onChange of this <select> element;
If you select option#1 it should prop the value dummy1 to input[name="Check_Config_PaymentGateway_CreditCards_Login1"] and the value dummy2 to input[name="Check_Config_PaymentGateway_CreditCards_Password"]
If you select option#2 it should prop the value dummy3 to input[name="Check_Config_PaymentGateway_CreditCards_Login1"] and the value dummy4 to input[name="Check_Config_PaymentGateway_CreditCards_Password"]
I've been working on this jsFiddle.
I'm pretty new at JavaScript in general, let alone jQuery. This is way to sophisticated for my skill... If you can help me, I'd really appreciate it.

Here you go: http://jsfiddle.net/VW9N6/6/
This binds to the change event of the <select> element to detect when its value changes, and then updates the value of the <input> elements.

Try something like below,
Edit: Cached input text boxes.
DEMO
var dummyValues = [['dummy1', 'dummy2'], ['dummy3', 'dummy4']];
var $loginInput = $('input[name=Check_Config_PaymentGateway_CreditCards_Login1]');
var $pwdInput = $('input[name=Check_Config_PaymentGateway_CreditCards_Password]');
$('#paymentDD').change(function () {
var selectedVal = parseInt($(this).val(), 10) - 1;
$loginInput.val(dummyValues [selectedVal][0]);
$pwdInput.val(dummyValues [selectedVal][1]);
});
Updated dummyValues var as you add move options to the drop down.

I'm a fan of caching elements whenever possible, so that's what I do. I also saw that you were using the latest jQuery (1.7.2) in your jsFiddle, so why not use the recommended .on() method and then call an immediate .change() to populate on load?
You could try something like this:
var $span = $('span#print_pagename'),
$login = $('input[name="Check_Config_PaymentGateway_CreditCards_Login1"]'),
$password = $('input[name="Check_Config_PaymentGateway_CreditCards_Password"]'),
$select = $('<select><option id="1">1</option><option id="2">2</option></select>');
$span.after($select);
$select.on('change', function() {
var $this = $(this);
if ($this.val() === '1') {
$login.val('dummy1');
$password.val('dummy2');
} else if ($this.val() === '2') {
$login.val('dummy3');
$password.val('dummy4');
}
}).change();

Update script var's with value from drop down?

I have a script, which basically looks like this (the part I need help with):
<script>
var languageFrom = " from ";
var languageTo = " to ";
</script>
If I had a drop down menu that looked like this:
<select>
<option value="en">En</option>
<option value="fr">Fr</option>
</select>
When you select one of the drop down menus, it populates the from variable with the text from the option value. How can you accomplish this? Are there any tutorials on this?

You can bind a change event handler to the select element:
document.getElementById("yourSelect").onchange = function() {
languageFrom = this.value;
}
Note that this assumes an id of yourSelect on the select element, and also assumes that languageFrom is in the scope of the event handler function (probably global).

selectNode.addEventListener("change", function(evt) {
languageFrom=languageTo;
languageTo = evt.target.value;
},false);