Default value in dropdown menu (JavaScript) - javascript

I wish to set the default value in a dropdown menu to the middle one (not the first).
I use dropdowns on my site for visitors to choose one of three / four / five sizes of a product.
The JavaScript is:
$(document).ready(function () {
$('.group').hide();
$('#option1').show();
$('#selectMe').change(function () {
$('.group').hide();
$('#'+$(this).val()).show();
})
});
The other code is:
<select id="selectMe">
<option value="option1">S</option>
<option value="option2">M</option>
<option value="option3">L</option>
</select>
User chooses a value, and then the BUY button changes accordingly. Thus ...
<div>
<div id="option1" class="group">Button for size S</div>
<div id="option2" class="group">Button for size M</div>
<div id="option3" class="group">Button for size L</div>
</div>
This works great, but in this instance, I want M to be the default, and not S (there are three sizes here, but sometimes there are more).

Why don't you make a selected property?
<option value="option2" selected>M</option>

Just use following snippets:
With jQuery
$(document).ready(function () {
var $select = $('#selectMe');
$select.val("option2");//initial value
$("[id=" + $select.val() + "]").show()
.siblings().hide();
$select.change(function () {
$("[id=" + $select.val() + "]").show()
.siblings().hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select id="selectMe">
<option value="option1">S</option>
<option value="option2">M</option>
<option value="option3">L</option>
</select>
<div>
<div id="option1" class="group">Button for size S</div>
<div id="option2" class="group">Button for size M</div>
<div id="option3" class="group">Button for size L</div>
</div>
Or, You can do it through pure JavaScript
var selectBox = document.getElementById("selectMe")
selectBox.selectedIndex = parseInt(selectBox.length / 2);
selectBox.onchange = function () {
changeButton(this.value);
}
changeButton(selectBox.value);
function changeButton(val) {
console.log(val)
var i = -1, elements = document.querySelectorAll('[class=group]');
while (elements[++i]) {
console.log(elements[i]);
elements[i].style.display = (elements[i].id == val) ? "block" : "none";
}
}
<select id="selectMe">
<option value="option1">S</option>
<option value="option2">M</option>
<option value="option3">L</option>
</select>
<div>
<div id="option1" class="group">Button for size S</div>
<div id="option2" class="group">Button for size M</div>
<div id="option3" class="group">Button for size L</div>
</div>

You got 3 options
1.Using HTML selected property for the option you want.
<select id="selectMe">
<option value="option1">S</option>
<option value="option2" selected>M</option>
<option value="option3">L</option>
</select>
2.Using jQuery
$('#selectMe').val('option2')
3.Using pure JS
document.getElementById('selectMe').value = 'option2';

Try this:
var options = $('#selectMe option');
var total = options.length + ((options.length % 2 == 0) ? 0 : -1);
var value = $(options[total / 2]).val();
$('#selectMe').val(value);

Try with one button:
HTML:
<select id="selectMe">
<option value="option1">S</option>
<option value="option2">M</option>
<option value="option3">L</option>
</select>
...
<div>
<div id="button-size" class="group">Button for size S</div>
</div>
jQuery:
var options = $('#selectMe option');
var total = options.length + ((options.length % 2 == 0) ? 0 : -1);
var value = $(options[total / 2]).val();
$('#selectMe').val(value);
changeButtonLabel(value);
$('#selectMe').on('change', function (evt)
{
var value = $(this).val();
changeButtonLabel(value);
});
function changeButtonLabel(value)
{
$('#button-size').html('Button for size ' + $('#selectMe').find('option[value=' + value + ']').html());
}

Related

Auto Select First Dropdown Option

Based on this codes: http://jsfiddle.net/3UWk2/3/
<select size="1" id="Rank" title="" name="Rank">
<option value="">-Select Your Rank-</option>
<option value="airman">Airman</option>
<option value="senior-airman">Senior Airman</option>
</select>
<div class="container">
<div class="airman">
<select class="second-level-select">
<option value="">-Select Your Rank-</option>
<option value="basic-ore-1">Basic Ore Miner - Level 1</option>
<option value="basic-ore-2">Basic Ore Miner - Level 2</option>
</select>
</div>
<div class="senior-airman">
<select class="second-level-select">
<option value="">-Select Your Rank-</option>
<option value="omber-miner-1">Omber Miner - Level 1</option>
<option value="omber-miner-2">Omber Miner - Level 2</option>
</select>
</div>
</div>
<div class="second-level-container">
<div class="basic-ore-1">
Line of text for basic ore miner 1
</div>
<div class="basic-ore-2">
Line of text for basic ore miner 2
</div>
<div class="omber-miner-1">
Line of text for omber miner 1
</div>
<div class="omber-miner-2">
Line of text for omber miner 2
</div>
</div>
Followed By:
$(document).ready(function() {
$('#Rank').bind('change', function() {
var elements = $('div.container').children().hide(); // hide all the elements
var value = $(this).val();
if (value.length) { // if somethings' selected
elements.filter('.' + value).show(); // show the ones we want
}
}).trigger('change');
$('.second-level-select').bind('change', function() {
var elements = $('div.second-level-container').children().hide(); // hide all the elements
var value = $(this).val();
if (value.length) { // if somethings' selected
elements.filter('.' + value).show(); // show the ones we want
}
}).trigger('change');
});
How do I auto select the first option of both dropdown and display the final value OnLoad?
I'm looking at 3 by 3 drop down, with 9 values in total.
Check if this might help you out
$(document).ready(function() {
//bind onchange for the rank dd
$("#Rank").on('change', function() {
let selectedValue = $(this).val();
$(".container>div").hide();
if (selectedValue.length) {
$("." + selectedValue).show();
//select.val($(select + " option:eq(1)").val());
}
})
//bind onchange for the airman dd
$("#second-level-select-airman").on('change', function() {
let selectedValue = $(this).val();
$(".second-level-container").children().hide();
if (selectedValue.length) {
$("." + selectedValue).show();
//select.val($(select + " option:eq(1)").val());
}
})
//bind onchange for the senior airman
$("#second-level-select-senior-airman").on('change', function() {
let selectedValue = $(this).val();
$(".second-level-container").children().hide();
if (selectedValue.length) {
$("." + selectedValue).show();
//select.val($(select + " option:eq(1)").val());
}
});
//select first value of first dropdown
$("#Rank").val($("#Rank option:eq(1)").val()).trigger('change');
//select the first option from the 2nd menu depending on the valur of the first dd
$("." + $("#Rank").val()).find("select").val(
$("." + $("#Rank").val()).find("select option:eq(1)").val()
).trigger('change');
// $("#Rank").val($("#Rank option:eq(1)").val());
// $("." + $("#Rank").val()).find("select").val(
// $("." + $("#Rank").val()).find("select option:eq(1)").val()
// );
});
.airman,
.senior-airman,
.second-level-container>div {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="Rank" name="Rank">
<option value="">-Select Your Rank-</option>
<option value="airman">Airman</option>
<option value="senior-airman">Senior Airman</option>
</select>
<div class="container">
<div class="airman">
<select class="second-level-select" id="second-level-select-airman">
<option value="">-Select Your Rank-</option>
<option value="basic-ore-1">Basic Ore Miner - Level 1</option>
<option value="basic-ore-2">Basic Ore Miner - Level 2</option>
</select>
</div>
<div class="senior-airman">
<select class="second-level-select" id="second-level-select-senior-airman">
<option value="">-Select Your Rank-</option>
<option value="omber-miner-1">Omber Miner - Level 1</option>
<option value="omber-miner-2">Omber Miner - Level 2</option>
</select>
</div>
</div>
<div class="second-level-container">
<div class="basic-ore-1">
Line of text for basic ore miner 1
</div>
<div class="basic-ore-2">
Line of text for basic ore miner 2
</div>
<div class="omber-miner-1">
Line of text for omber miner 1
</div>
<div class="omber-miner-2">
Line of text for omber miner 2
</div>
</div>

How to associate two inputs in JavaScript?

I have this code:
$(document).ready(function(){
$('.container select').each(function(){
$(this).on('change', function(){
var selectedVal = $(this).val();
//console.log(selectedVal);
});
});
$('input').on('change', function () {
var sum = 0;
$('input').each(function() {
sum += Number($(this).val());
});
$('.total span').html(sum);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
<div class='full'>
<input type='number' value=''>
<select name='select1'>
<option value='a1'>A1</option>
<option value='a2'>A2</option>
</select>
</div>
<div class='full'>
<input type='number' value=''>
<select name='select2'>
<option value='a1'>A1</option>
<option value='a2'>A2</option>
</select>
</div>
<div class='full'>
<input type='number' value=''>
<select name='select3'>
<option value='a1'>A1</option>
<option value='a2'>A2</option>
</select>
</div>
<div class='total'>
Total nr: <span>5(2 A1, 3 A2)</span>
</div>
</div>
Is it possible that on change of the select and the input of type number to modify the total number like in the code above using JavaScript/jQuery?
Can anyone help me with this please.
On every change on the inputs or select fields I need to calculate total number of A1 and total number of A2. Hope this make sense. And display them beside the total number.
JSFiddle
We can't give you the full code but I tried to provide some logic for what you want.I think you want some thing like this:
//create a json to collect the sum of numbers
var number = {
a1: 0,
a2: 0,
a1_count:0,
a2_count:0
};
//check in select change
$(".select").change(function() {
//flush previous calculation before using again
number.a1=0,number.a2=0,number.a1_count=0,number.a2_count=0;
//check all the select value and get the corresponding input value
$(".select").each(function() {
var valueType = $(this).val();
if (valueType == "a1") {
number[valueType+"_count"]=number[valueType+"_count"]+1;
number[valueType] = number[valueType] + parseInt($(this).prev().val()||0);
} else if (valueType == "a2") {
number[valueType+"_count"]=number[valueType+"_count"]+1;
number[valueType] = number[valueType] + parseInt($(this).prev().val()||0);
}
});
$("#total").html('Total:'+(number.a1+number.a2)+',A1:'+number.a1+'('+number.a1_count+'),A2:'+number.a1+'('+number.a2_count+')');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
<div class='full'>
<input type='number' value=''>
<select name='select1' class='select'>
<option value='a1'>A1</option>
<option value='a2'>A2</option>
</select>
</div>
<div class='full'>
<input type='number' value=''>
<select name='select2' class='select'>
<option value='a1'>A1</option>
<option value='a2'>A2</option>
</select>
</div>
<div class='full'>
<input type='number' value=''>
<select name='select3' class='select'>
<option value='a1'>A1</option>
<option value='a2'>A2</option>
</select>
</div>
<div class='total' id="total">
</div>
</div>
This will work for any arbitrary list in the select.
function change() {
var res = {}, fulls = $('.container .full');
fulls.each(function(index){
var selected = $(this).find('select > option:selected').text();
if (! res[selected]) res[selected] = 0;
res[selected] += 1*$(this).find('input[type="number"]').val();
});
var detail = "", total = 0;
for(prop in res) {
if (res.hasOwnProperty(prop)) {
try {
var val = 1*res[prop];
detail += ", "+val+" "+prop;
total += val;
}catch(e){}
}
}
$('.total > span').text(""+total+" ("+detail.substr(2)+")");
}
$().add('.container .full input[type="number"]')
.add('.container .full select[name^="select"]')
.on('change', change);

How to get options element by id and output text

Could someone help me with this little javascript. I want the rersult to show in NA only when option value 2 is selected. I want 11" to show will show. Need a simple script to output custom text based on value text. I do know i have value="2" listed twice. I cannot use the value field.
<select id="sizing-change" onchange="myFunction()">
<option value="2">12"</option>
<option value="2" id="test">11"</option>
</select>
<div class="sizefinal">
Suggested Size: <span id="finalsize">NA</span>
</div>
<script>
function myFunction() {
if(document.getElementById("test").value == "11") {
document.getElementById("finalsize").innerHTML = "Size: 11";
}
}
</script>
You can check the text of the option like
function myFunction() {
var el = document.getElementById("sizing-change");
if (el.options[el.selectedIndex].text.trim() == '11"') {
document.getElementById("finalsize").innerHTML = "Size: 11";
} else {
document.getElementById("finalsize").innerHTML = "NA";
}
}
<select id="sizing-change" onchange="myFunction()">
<option value="2">12"</option>
<option value="2" id="test">11"</option>
</select>
<div class="sizefinal">
Suggested Size: <span id="finalsize">NA</span>
</div>
If you can alter the value field of option to different values(which you should) then you can try this:
<select id="sizing-change" onchange="myFunction()">
<option value="12">12</option>
<option value="11" id="test">11</option>
</select>
<div class="sizefinal">Suggested Size: <span id="finalsize">NA</span>
</div>
<script>
function myFunction() {
if (document.getElementById("sizing-change").value == 11) {
document.getElementById("finalsize").innerHTML = "Size: 11";
}
}
</script>
Demo: http://jsfiddle.net/GCu2D/784/
var finalsize = document.querySelector('#finalsize');
var sizingChange = document.querySelector('#sizing-change')
var testOption = sizingChange.querySelector('#test');
myFunction(sizingChange);
function myFunction(element) {
var checked = element.querySelector(':checked');
if (checked == testOption) {
finalsize.innerHTML = "Size: " + element.querySelector(':checked').text;
} else {
finalsize.innerHTML = 'NA';
}
}
<select id="sizing-change" onchange="myFunction(this)">
<option value="2">12"</option>
<option value="2" id="test">11"</option>
</select>
<div class="sizefinal">
Suggested Size: <span id="finalsize">NA</span>
</div>

Drop-down list selection does not display in div

I want the displayround div to display what is selected in the selection box. Somehow when I removed some of the array values it stopped working.. Any idea why?
HTML:
<div id="buttonholder">
<button id="previous">< Previous round</button>
<button id="next">Next round ></button>
<button id="current">> Current round <</button>
<div style="font-size: 0;">
<form id="inputform">
<select name="rounds" id="selectbox">
<option value="2013/2014">--- 2013/2014 ---</options>
<option value="2012/2013">--- 2012/2013 ---</options>
<option value="2011/2012">--- 2011/2012 ---</options>
<option value="2010/2011">--- 2010/2011 ---</options>
<option value="2009/2010">--- 2009/2010 ---</options>
<option value="2008/2009">--- 2008/2009 ---</options>
<option value="2007/2008">--- 2007/2008 ---</options>
<option value="2006/2007">--- 2006/2007 ---</options>
</select>
</form>
</div>
<div id="displayround">
</div>
</div>
JQuery:
$(document).ready(function() {
var season = new Array();
season[0]="2013/2014";
season[1]="2012/2013";
season[2]="2011/2012";
season[3]="2010/2011";
season[4]="2009/2010";
season[5]="2008/2009";
season[6]="2007/2008";
season[7]="2006/2007";
season[8]="2005/2006";
$("#buttonholder").find("button").addClass("left")
$("#buttonholder").find("#submit").removeClass("left").addClass("right")
$("#buttonholder").find("#inputform").addClass("right");
$("#displayround").text(season[0]).data('index', 0);
$("#next").click(function () {
var index = +$("#displayround").data('index') + 1;
if (index >= season.length) index = 0;
$("#displayround").text(season[index]).data('index', index);
});
$("#previous").click(function () {
var index = +$("#displayround").data('index') - 1;
if (index <= -1) index = season.length - 1;
$("#displayround").text(season[index]).data('index', index);
})
The problem is somewhere in this function I'm assuming:
$("#selectbox").change(function() {
var index = $(this).val().match(/\d+/) - 1;
$("#displayround").text(season[index]).data('index', index);
});
}); //end of document.ready function

Select elements by index in elements name

Good morning. I have a form that is divided into numbered sections. Sometimes I need to disable some of these sections by using their section numbers. Right now when the function receives an array of section numbers I run a loop to collect them one-by-one. Is there a better, more efficient way of collecting numbered sections by their section numbers with jQuery?
HTML:
<div id="frameContent">
<div id="section1">
<select>
<option value="1" selected="selected">empty (default)</option>
<option value="2" selected="selected">foo</option>
<option value="3" selected="selected">bar</option>
</select>
</div>
<div id="section2">
<select>
<option value="1" selected="selected">empty (default)</option>
<option value="2" selected="selected">foo</option>
<option value="3" selected="selected">bar</option>
</select>
</div>
<div id="section3"><select>
<option value="1" selected="selected">empty (default)</option>
<option value="2" selected="selected">foo</option>
<option value="3" selected="selected">bar</option>
</select></div>
<div id="section4">
<select>
<option value="1" selected="selected">empty (default)</option>
<option value="2" selected="selected">foo</option>
<option value="3" selected="selected">bar</option>
</select>
</div>
</div>
JS:
var toggleFormSections = function(frameContent, sectionNumbers, enable) {
// init empty selector
var sections = $();
// collect sections
for(var i = 0; i < sectionNumbers.length; i++) {
var section = frameContent.find('div#section' + sectionNumbers[i]);
sections = sections.add(section);
}
// disable/enable sections and elements within
if(sections.length > 0) {
if(enable) {
sections.find('select').prop('disabled', false);
} else {
sections.find('select').prop('disabled', 'disabled');
}
}
}
// usage:
var frameContent = $('#frameContent');
toggleFormSections(frameContent, [2,3], false);
Link to FIDDLE
http://jsfiddle.net/XZ9fT/3/
You can easily use jQuery's each to loop through the index elements, no need to check it's length. I'm not quite sure, why you want the enabled flag. Since you can call it with an empty array to enable everything. This would make it even shorter.
$.each(sectionNumbers, function(i) {
if(enable) {
frameContent.find('div#section' + sectionNumbers[i] + ' select').prop('disabled', false)
} else {
frameContent.find('div#section' + sectionNumbers[i] + ' select').prop('disabled', 'disabled');
}
});
One way will be
var toggleFormSections = function(frameContent, sectionNumbers, enable) {
// init empty selector
var sections = [];
// collect sections
for(var i = 0; i < sectionNumbers.length; i++) {
sections.push('#section' + sectionNumbers[i]);
}
sections = $(sections.join(', '))
sections.find('select').prop('disabled', !enable);
}
Demo: Fiddle

Categories