Is there a way to set the value of a dropdown list in jQuery (or Javascript) based on the node value?
<select name="ddlProperty">
<option value="1" selected="selected"></option>
<option value="2">Animal Kingdom</option>
<option value="3">Epcot</option>
<option value="4">Hollywood Studios</option>
<option value="5">Magic Kingdom</option>
<option value="6">Downtown Disney</option>
</select>
I'd need to set the option of Magic Kingdom, so something like:
$("#ddlLocation").val("Magic Kingdom")
So that Magic Kingdom would become the selected item, that doesn't work as expected. Any ideas?
If you can use the value (not text!), do that using .val():
$("#ddlProperty").val("5");
If you don't have that, use .filter(), .text() and .attr() to find and set the selected <option>, like this:
$("#ddlProperty option").filter(function() {
return $(this).text() === "Magic Kingdom"
}).attr('selected', true);
Something like:
var box = document.getElementById('box'),
options = box.options;
for(var i = 0; i < options.length; ++i){
if(options[i].text == val){
options[i].selected = true;
}
}
$("#ddlProperty > option").each(function(i, elem) {
if($(elem).text() == "Magic Kingdom") {
$('#ddlProperty').val(elem.value);
return false;
}
});
And next time please make a proper example where the element has an id and that ID matches the ID in your code. I've spent about 5 minutes checking for an error until I've noticed the ID being different...
http://jsbin.com/ikibi3/2
myselect="Magic Kingdom";
$("select[name='ddlProperty'] option").each(function() {
if($(this).text() == myselect) {
$(this).attr('selected', true);
} else {
$(this).attr('selected', false);
}
});
Related
I'm trying to copy or move one select box item to another select box. The problem is that when one or more items are moved from the first box to the second, it should be selected. But it's not working.
My Code
function SelectMoveRows(SS1,SS2)
{
var SelID='';
var SelText='';
var SelText2='';
// Move rows from SS1 to SS2 from bottom to top
for (i=SS1.options.length - 1; i>=0; i--)
{
if (SS1.options[i].selected == true)
{
SelID=SS1.options[i].value;
SelText=SS1.options[i].text;
SelText2=SS1.options[i].attr("selected");
var newRow = new Option(SelText,SelID,SelText2);
SS2.options[SS2.length]=newRow;
SS1.options[i]=null;
}
}
SelectSort(SS2);
}
Then I use
SelText2=SS1.options[i].attr("selected");
But it's not working. If I use:
SelText2=SS1.options[i].select=true;
then option looks like:
<option value="3" selected="">Delivery</option>
But it should be:
<option value="3" selected="selected">Delivery</option>
In the option tag, the attribute selected doesn't need a value:
<option value="3" selected>Delivery</option>
is the same as
<option value="3" selected="selected">Delivery</option>
check it here:
http://jsfiddle.net/n99L2xhv/1/
you should use .prop not .attr
e.g.
SelText2=SS1.options[i].prop("selected", true);
for reference: .prop() vs .attr()
Update I would go about doing this as follows;
<select id="select1">
<option value="1">Option1</option>
<option value="2">Option2</option>
</select>
<select id="select2">
<option value="3">Option3</option>
</select>
$("#select1").change(function(){
$("#select1 option:selected").each(function() {
var option = $(this);
$("#select2").append(option);
$("#select1").remove(option);
});
});
This will shift the selected option from Select 1 to Select 2 when it is chosen.
As pointed out by David Thomas in the comments, .attr() is not a valid method on a select element; It is a method on a jQuery object, which you don't have.
You could just pass true as the parameter to the Option constructor, and the third parameter is really the defaultSelected property, while the fourth paramter is the selected property.
for (var i = SS1.options.length - 1; i >= 0; i--) {
var option = SS1.options[i];
if (option.selected) {
SS2.add(new Option(option.text, option.value, false, true));
SS1.remove(i);
}
}
You could use option.selected instead of true, but because of the if-statement, you know option.selected will always be true.
jsfiddle
I have a form with this disabled select element (I have disabled it with jquery)
<select class="select form-control" id="ifacility" name="facility">
<option value="" selected="selected">------</option>
<option value="1">Room 1</option>
<option value="2">Room 1</option>
<option value="3">Room 2</option>
<option value="4">Room 3</option>
</select>
I want to use Jquery to find an option with a name eg Room 2 and make it selected.
$(document).on('click', '.select-option', function() {
var room = $(this).attr('value') //This is what gives the 'Room 2'
//I want to select this room from the options and make it selected
});
You don't really need jQuery for this, so here's a plain-old JavaScript solution.
Declare this function:
function setOptionByValue(select, value){
var options = select.options;
for(var i = 0, len = options.length; i < len; i++){
if(options[i].textContent === value){
select.selectedIndex = i;
return true; //Return so it breaks the loop and also lets you know if the function found an option by that value
}
}
return false; //Just to let you know it didn't find any option with that value.
}
Use it like this:
setOptionByValue(document.getElementById('ifacility'), 'Room 2');
Demo
A jQuery solution using filter():
var room2 = $('#ifacility option').filter(function() {
return $(this).text() == 'Room 2';
});
// room2.val() = '3'
$('#ifacility').val(room2.val());
Fiddle
If you want to user jQuery to accomplish task, try this
$('#ifacility').find('option:contains("Room 2")').prop('selected', true);
It finds option by text and sets its selected attribute.
I have a validator function looping through to check and see if all inputs have been filled out, but I also need to check if the dropdown's have been selected as well. I would like to write that into the same function.
function validateSave (){
// reset status
var good = true
$('.errormessage-left').removeClass('active-left')
$('input').removeClass("warning")
$('input').each(function(){
if ($(this).val() == "") {
console.log("found an empty");
good = false
$(this).addClass("warning")
$('.errormessage-left').addClass('active-left'),
$('.modal').addClass('modal-active');
}
})
console.log(good)
return good
}
What's the best way to go about this?
You can use val() on a dropdown (<select> element) just like an input element, so just include it in your selector
$('input, select').each(function(){
You can do this :
Assuming the first element is :"please choose..."
if ($(".myDDL").get(0).selectedIndex>0)...
or
if ($(".myDDL").prop('selectedIndex')>0)...
Try this:
$('input').each(function(){
if($(this).prop('selected') == true){
// selected item
}
});
Assuming your HTML looks something like this:
<input type="text" name="whatever">
<select>
<option value="">Choose One...</option>
<option value="choice1">Choice 1</option>
<option value="choice2">Choice 2</option>
<option value="choice3">Choice 3</option>
</select>
Then your jQuery can figure it out like this
$('input, select').each(function(){
if($(this).val() == ''){
alert('Cannot be blank!');
}
else{
//proceed
}
}
you should be able to add this to your loop:
if ($(this).prop('type')=='select-one'){
if ($(this).prop('selectedIndex')==0){
console.log("found an empty");
good = false
$(this).addClass("warning")
$('.errormessage-left').addClass('active-left'),
$('.modal').addClass('modal-active');
}
}
I need to make Select name with option value, to select a specific value or index. the data where comes from db in a value "{{design}}".
I do get the value currectly, but I dont manage to set "selected" on the currect option value.
here is the code:
console.log("{{design}}");
$(document).ready(function () {
var options = $('select').children('option');
var size = $('select').children('option').length;
for (i=0;i<size;i++)
{
if ( options[i].innerHTML==="{{design}}")
{
options.selectedIndex=i;
}
}
});
the html is :
<select name="design" required id="design" >
<option value="1">flowers</option>
<option value="2">classic</option>
<option value="3">roses</option>
</select>
I need to make to currect {{design}} value, lets say it's 2, so it will be <option value="2" selected>classic</option>`
thanks!
SOLVED
Hi, found the solution to the issue, if anyone eles goes into trouble.
$(document).ready(function () {
var options = $('select').children('option');
var size = $('select').children('option').length;
for (i=0;i<size;i++)
{
if ( $('select').children('option')[i].value === "{{design}}")
{
$('select').children('option')[i].selected=true;
}
}
});
the currect way is to find the right option value and then-> [i].selected=true
goodluck
Try this
var selectedvalue=2; //option with value 2 should be selected
$("#design option[value=selectedvalue]").attr("selected","selected");
Hope this helps...
If I understood right, you are on the right path just taking a minor detour. Try this:
if ( options[i].innerHTML==="{{design}}")
{
options.attr('selected', 'selected');
}
The example of .each() usage:
$(document).ready(function(){
$('select option').each(function(i){
if( i.value === "{{design}}"){
$(this).attr('selected','selected');
}
});
});
try this:
$(document).ready(function(){
$('select option').each(function(i){
//if this option contains the word "{{design}}" Then this is selected
if( $(this).html().indexOf("{{design}}") != -1)
$(this).attr('selected',true);
});
});
<select id="id_deals-1-deal_template" name="deals-1-deal_template">
<option selected="selected" value="">---------</option>
<option value="1" selected="selected">Pear</option>
<option value="2">Apple</option>
<option value="4">Melon</option>
</select>
In order to select Melon I have to do this:
$('#id_deals-1-deal_template>option:eq(3)').prop('selected', true);
But I would rather have to select the primary key that is 4 in this case.
Hence is it possible to select a dropdown by its value rather than sequence?
Try using .val which can be a setter or getter based on the argument. Below is a setter..
$('#id_deals-1-deal_template').val(4);
$('#id_deals-1-deal_template').val(4);
Here is a demo:
http://jsfiddle.net/M3UBc/
use
$('#id_deals-1-deal_template').val(4);
or
$('#id_deals-1-deal_template').val('Melon');
Select by option name
$("#id_deals-1-deal_template option").each(function() {
if($(this).text() == 'Melon') {
$(this).attr('selected', 'selected');
}
});
Select by value id
$("#id_deals-1-deal_template option").each(function() {
if($(this).text() == '4') {
$(this).attr('selected', 'selected');
}
});