<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');
}
});
Related
I'am trying to select the empty (first) value of a dropdown select option if it does not contains the value from an another dropdown select list:
$('#FirstDropdown').change(function() {
if ( $('#SecondDropdown option').filter(':contains(' + this.value + ')') ){
$('#SecondDropdown option').filter(':contains(' + this.value + ')').prop('selected',true);
}else{
$("#SecondDropdown option[value='']").prop('selected',true);
}
});
This code work well if #SecondDropdown option contains this.value but the else statement doesn't reset the dropdown list if not.
Any suggestion please ?
EDIT : The dropdown lists look like this :
<select id="FirstDropdown">
<option value="" selected="selected"> </option>
<option value="VAL1">First Value</option>
<option value="VAL2">Second Value</option>
<option value="VAL3">Third Value</option>
<option value="VAL4">Fourth Value</option>
</select>
<select id="SecondDropdown">
<option value="-1"> </option>
<option value="12">VAL1 SELECT OPTION</option>
<option value="15">VAL2 SELECT OPTION</option>
<option value="10">VAL3 SELECT OPTION</option>
</select>
EDIT : Added a JsFiddle.
You do not have any option element having value=''. You need to use $("#SecondDropdown option[value='-1']").prop('selected',true); . you would also need to change the condition in if statement to this.value!='':
$('#FirstDropdown').change(function() {
if ( this.value!='' ){
$('#SecondDropdown option').filter(':contains(' + this.value + ')').prop('selected',true);
}else{
$("#SecondDropdown option[value='-1']").prop('selected',true);
}});
Working Demo
Try this :There is problem in your if condition as it is getting always true. You can use .length to check if option exist and select the option else select blank
$('#FirstDropdown').change(function() {
if ($('#SecondDropdown option:contains('+this.value +')').length>0){
$('#SecondDropdown option:contains('+this.value +')').prop('selected',true);
}else{
$("#SecondDropdown option[value='-1']").prop('selected',true);
}
});
JSFiddle Demo
This will work for you.
First, you have to check you this.value, because any string contains ''.
Second, as if works fine, you just need to filter options by [value=-1]
Final JS:
$('#FirstDropdown').change(function() {
var $second = $('#SecondDropdown option').filter(':contains(' + this.value + ')');
if (this.value && $second){
$second.prop('selected',true);
}else{
$("#SecondDropdown option[value=-1]").prop('selected',true);
}
});
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'm trying to add on to the value "&fullpage=true"
<select name="navMenu" onchange="go(this.options[this.selectedIndex].value)">
<option value="-">Select</option>
<option value="page.html&nyo=0" class="ccbnLnk">All</option>
<option value="page.html&nyo=0" class="ccbnLnk">IR</option>
<option value="page.html&nyo=0" class="ccbnLnk">Product</option>
</select>
I'm guessing it would be something like this?
$('select option').attr(val + "&fullpage=true");
You were close, but you needed to iterate over all the option elements and then make the change like:
$('select option').each(function () {
$(this).val($(this).val() + "&fullpage=true");
});
jsFiddle example
You can loop through each of the element using the each function
$('select option').each(function(){
$(this).attr('value', $(this).attr('value') + "&fullpage=true");
});
I have a select element wrapped by a span element. I am not allowed to use the select id but I am allowed to use the span id.
I am trying to write a javascript/jquery function in which the input is a number i, which is one of the values of the select's options. The function will turn the relevant option to selected.
<span id="span_id">
<select id="h273yrjdfhgsfyiruwyiywer" multiple="multiple">
<option value="1">cleaning</option>
<option value="2">food-2</option>
<option value="3">toilet</option>
<option value="4">baby</option>
<option value="6">knick-knacks</option>
<option value="9">junk-2</option>
<option value="10">cosmetics</option>
</select>
</span>
I wrote something as follows (this does not completely work, which is why I am posting this question):
function select_option(i) {
options = $('#span_id').children('select').children('option');
//alert(options.length); //7
//alert(options[0]); //[object HTMLOptionElement]
//alert(options[0].val()); //not a jquery element
//alert(options[0].value); //1
//the following does not seem to work since the elements of options are DOM ones not jquery's
option = options.find("[value='" + i + "']");
//alert(option.attr("value")); //undefined
option.attr('selected', 'selected');
}
Thanks!
Here's the simplest solution with a clear selector:
function select_option(i) {
return $('span#span_id select option[value="' + i + '"]').html();
}
With jQuery > 1.6.1 should be better to use this syntax:
$('#span_id select option[value="' + some_value + '"]').prop('selected', true);
Just wrap your option in $(option) to make it act the way you want it to. You can also make the code shorter by doing
$('#span_id > select > option[value="input your i here"]').attr("selected", "selected")
options = $("#span_id>select>option[value='"+i+"']");
option = options.text();
alert(option);
here is the fiddle http://jsfiddle.net/hRFYF/
You can use .val() to select the value, like the following:
function select_option(i) {
$("#span_id select").val(i);
}
Here is a jsfiddle: https://jsfiddle.net/tweissin/uscq42xh/8/
To get the value just use this:
<select id ="ari_select" onchange = "getvalue()">
<option value = "1"></option>
<option value = "2"></option>
<option value = "3"></option>
<option value = "4"></option>
</select>
<script>
function getvalue()
{
alert($("#ari_select option:selected").val());
}
</script>
this will fetch the values
function select_option(index)
{
var optwewant;
for (opts in $('#span_id').children('select'))
{
if (opts.value() = index)
{
optwewant = opts;
break;
}
}
alert (optwewant);
}
You can change with simple javascript
document.querySelector('#h273yrjdfhgsfyiruwyiywer').value='4'
<span id="span_id">
<select id="h273yrjdfhgsfyiruwyiywer" multiple="multiple">
<option value="1">cleaning</option>
<option value="2">food-2</option>
<option value="3">toilet</option>
<option value="4">baby</option>
<option value="6">knick-knacks</option>
<option value="9">junk-2</option>
<option value="10">cosmetics</option>
</select>
</span>
$("#h273yrjdfhgsfyiruwyiywer").children('[value="' + i + '"]').prop("selected", true);
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);
}
});