Develop Reference

comparing select box timings

<select id="ddlMinExp">
<option value="0">hour</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select id="mints1">
<option value="">minuts</option>
<option value="00">00</option>
<option value="30">30</option>
</select>
<select id="ddlMaxExp" class="slct">
<option value="0">hour</option>
</select>
<select id="mints">
<option value="">minuts</option>
<option value="00">00</option>
<option value="30">30</option>
</select>
JS:
<script>
$(function() {
$('#ddlMinExp').change(function() {
//var selectedMaxValue = Number($(this).val());
var selectedMinValue = Number($('#ddlMinExp').val());
// alert(selectedMinValue);
if (selectedMinValue < 12) {
//alert(selectedMinValue);
$(".slct option").remove();
for (i = selectedMinValue; i < 12; i++) {
$('select.slct').append('<option value="' + i + '"' + '>' + i + '</option>');
//alert(i);
}
}
$('body').on('change', '#mints1', function() {
var mints = Number($(this).val());
if (mints === 30) {
$(".slct option").remove();
var j = selectedMinValue + 1;
for (j; j < 12; j++) {
$('select.slct').append('<option value="' + j + '"' + '>' + j + '</option>');
//alert(i);
}
} else {
$(".slct option").remove();
for (i = selectedMinValue; i < 12; i++) {
$('select.slct').append('<option value="' + i + '"' + '>' + i + '</option>');
//alert(i);
}
}
});
});
})
</script>
if select from first select box 4 automatically 3rd select box starts from 4,but when even i select 30 from second select box 3rd select box should starts from 5, first time it is working,second time if i select 3 from first select box 3rd select box should stars from 4 becoz already second select box has the value 30,when ever i change first and second select boxes 3rd select box has to changesee fiddle link

Updated your fiddle, please check here https://jsfiddle.net/ka56qw6t/7/
I've added one more condition in $('#ddlMinExp').change(function() to check the value of 'mints1', if its 30 then increasing 'ddlMaxExp' by 1.

i have edited your whole code, i think its working as you expected, have a look at jsfidde
var selectedMinMnts = $('#ddlMntMin').val()!=="minuts"?Number($('#ddlMntMin').val()):null;
updateMaxTime(selectedMinHrs,selectedMinMnts);
});
$('body').on('change', '#ddlMntMin', function() {
var selectedMinHrs = $('#ddlHrsMin').val() !== "hour"?Number($('#ddlHrsMin').val()):null;
var selectedMinMnts = $('#ddlMntMin').val()!=="minuts"?Number($('#ddlMntMin').val()):null;
updateMaxTime(selectedMinHrs,selectedMinMnts);
});
function updateMaxTime(minHrs,minMnts){
if((minHrs && minHrs != null)){
if (minHrs < 12) {
//alert(selectedMinValue);
$(".ddlHrsMax option").remove();
for (i = minHrs; i < 12; i++) {
$('select.ddlHrsMax').append('<option value="' + i + '"' + '>' + i + '</option>');
//alert(i);
}
}
}
if((minMnts && minMnts != null)){
console.log(minMnts);
if (minMnts === 30) {
$(".ddlHrsMax option").remove();
var j = minHrs + 1;
for (j; j < 12; j++) {
$('select.ddlHrsMax').append('<option value="' + j + '"' + '>' + j + '</option>');
//alert(i);
}
} else {
$(".ddlHrsMax option").remove();
for (i = minHrs; i < 12; i++) {
$('select.ddlHrsMax').append('<option value="' + i + '"' + '>' + i + '</option>');
//alert(i);
}
}
}
}
})

Cascading Dropdown is not working using jquery

by the way i just got the js code from one of the questions here but i don't why it will not work on mine. please help me.
.js file
jQuery(function ($) {
var College = {
'College of Engineering': ['Civil Engineering', 'Computer Engineering', 'Electronics and Communication Engineering', 'Electrical Engineering', 'Industrial Engineering'],
}
var $College = $('#college');
$('#department').change(function () {
var department = $(this).val(), clg = College[department] || [];
var html = $.map(clg, function (cl) {
return '<option value="' + cl + '">' + cl + '</option>'
}).join('');
$College.html(html)
});
});
is my code wrong? i dont know why it will not work.
the html code for this is
<select class="form-control" name="college" id="college" runat="server">
<option value="College">Select College</option>
<option value="College of Engineering">College of Engineering</option>
<option value="CAS">College of Arts and Science</option>
<option value="Commerce">College of Commerce</option>
</select>
<select id="department" class="form-control" runat="server" placeholder="Department" >
<option value="Department">Select Department</option>
</select>

You could do something like this: https://jsfiddle.net/rockmandew/12ej2rt3/
Set your HTML Markup like so: (*this example contains a three step dropdown selection)
<select id="main_list">
<option value="default" selected>Select Your List</option>
<option value="mobile">mobile list</option>
<option value="laptop">laptop list</option>
</select>
<select id="brand" class="secondary"></select>
<select id="version" class="secondary"></select>
Then the JS as follows:
$(function() {
var sel, i,
list = ['mobile', 'laptop'],
phone = ['Samsung', 'Nokia'],
laptop = ['HP', 'Dell'],
android = ['4.1', '4.2'],
windows = ['8', '8.1'],
dev_default = '<option value="default" selected>Select your Device brand</option>',
os_default = '<option value="default" selected>Select your OS version</option>';
sel_brand = $('#brand');
sel_version = $('#version');
$('select').change(function() {
switch (this.id) {
case 'main_list':
$('.secondary').hide();
sel_brand.find('option').remove();
sel_brand.append(dev_default);
sel_brand.show();
if (this.value == 'mobile') {
for (i = 0; i < phone.length; i++) {
$("#brand").append(
'<option value="' + phone[i] + '">' + phone[i] + '</option>'
);
}
}else if (this.value == 'laptop') {
for (i = 0; i < phone.length; i++) {
$("#brand").append(
'<option value="' + laptop[i] + '">' + laptop[i] + '</option>'
);
}
}
break;
case 'brand':
sel_version.find('option').remove();
sel_version.append(os_default);
sel_version.show();
if (this.value == 'Samsung') {
for (i = 0; i < android.length; i++) {
$("#version").append(
'<option value="' + android[i] + '">' + android[i] + '</option>'
);
}
}else if (this.value == 'Nokia' || this.value == 'HP' || this.value == 'Dell') {
for (i = 0; i < windows.length; i++) {
$("#version").append(
'<option value="' + windows[i] + '">' + windows[i] + '</option>'
);
}
}
break;
}
});
}); //END document.ready()
Also, if you need/want more information on how to populate these dropdowns dynamically from either a text file, JSON, or a database - check out this article: https://css-tricks.com/dynamic-dropdowns/

how to create x amount of div on select option value

this is my first question on here so ill try and be as detailed as possible! I am currently creating a HTML form with a select option with options 1 - 4. My aim is to use a Javascript function to create a certain amount of div's depending on which value the user has selected from the form.
For example, if the user has selected option 2, i want to auto generate 2 div containers. Then, if the user chooses to select another option after... the correct amount of divs will then be created.
My select HTML currently looks like this;
<select id="select_seasons">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
I have created a script which will create a div on button click but this isn't my aim;
var number = 2;
document.getElementById('add').addEventListener('click', function(
) {
var newDiv = document.createElement('div');
newDiv.id = 'container';
newDiv.innerHTML = "<label>Episode " + number + " name</label> <input type='text' name='episode'" + number +" /> <label>Episode " + number + " embed</label> <input type='text' /> ";
document.getElementById('contain_form').appendChild(newDiv);
number++;
});
I would appreciate it if somebody was to help me with the JS i will need to make this functionality and i hope i've explained myself clearly enough in this post!
Feel free to comment and ask for me details if required.
Thanks in advance,
Sam

You need to bind the change event on your select element. Something like this:
var divs = [];
document.getElementById('select_seasons').addEventListener('change', function(e) {
var n = +this.value;
for (var i = 0; i < divs.length; i++) {
divs[i].remove();
}
divs = [];
for (var i = 0; i < n; i++) {
var d = document.createElement("div");
d.className = "new";
document.body.appendChild(d);
divs.push(d);
}
});
.new {
background-color: red;
width: 100px;
height: 20px;
margin: 1px;
}
<select id="select_seasons">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>

Solution for your problem: http://jsfiddle.net/43ggkkg7/
document.getElementById('select_seasons').addEventListener('change', function(){
var container = document.getElementById('container');
container.innerHTML = ''; //clear
//Find selected option
var n = 1;
for(var i = 0; i < this.options.length; ++i){
if(this.options[i].selected){
n = ~~this.options[i].value; //Cast to int
break;
}
}
for(var i = 1; i <= n; ++i){ //Because we want to count from 1 not 0
var newDiv = document.createElement('div');
newDiv.id = 'element-' + i;
newDiv.innerHTML = "<label>Episode " + i + " name</label> <input type='text' name='episode[" + i +"]' /> <label>Episode " + i + " embed</label> <input type='text' /> ";
container.appendChild(newDiv);
}
});
//Emit event on page init
document.getElementById('select_seasons').dispatchEvent(new Event('change'));

I will help you to read this now, I don't need another loop to remove the old divs in the container, you can use innedHTML and set it to empty.
<select id="select_seasons">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
document.getElementById('select_seasons').addEventListener('change', function() {
var self = this,
exisiting = document.getElementById('contain_form');
//remove existing divs
exisiting.innerHTML = '';
for(i=1; i<= self.value; i++) {
var newDiv = document.createElement('div');
newDiv.id = 'container';
newDiv.innerHTML = "<label>Episode " + i + " name</label> <input type='text' name='episode'" + i +" /> <label>Episode " + number + " embed</label> <input type='text' /> ";
exisiting.appendChild(newDiv);
}
});
Check this fiddle

If I understood the question correctly, the seasons form should update and auto-fill with the select's number. Use the change event and refresh the form with the selected value.
var selectSeasons = document.getElementById("select_seasons");
selectSeasons.addEventListener('change', function() {
populateForm(parseInt(this.value));
});
function populateForm(numberOfSeasons) {
// first, remove all existing fields
var containForm = document.getElementById("contain_form");
while (containForm.firstChild) {
containForm.removeChild(containForm.firstChild);
}
for (var i = 1; i <= numberOfSeasons; i++) {
addDiv(i);
}
}
function addDiv(number) {
var newDiv = document.createElement('div');
newDiv.id = 'container';
newDiv.innerHTML = "<label>Episode " + number + " name</label> <input type='text' name='episode'" + number + " /> <label>Episode " + number + " embed</label> <input type='text' /> ";
document.getElementById('contain_form').appendChild(newDiv);
number++;
}
Number of seasons:
<select id="select_seasons">
<option value="0">Please make a selection</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<div id="contain_form"></div>

You could use the selected value of the select element:
var number = select.options[select.selectedIndex].value;
For example:
var select = document.getElementById("select_seasons");
var button = document.getElementById("add");
var container = document.getElementById("container");
button.addEventListener("click", function () {
// uncomment the following line if you want the remove the previously generated divs:
//container.innerHTML = "";
var number = select.options[select.selectedIndex].value;
for (var i = 1; i <= number; i++) {
var div = document.createElement("div");
div.innerHTML = "div #" + i;
container.appendChild(div);
}
});
<select id="select_seasons">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<button id="add">Add</button>
<div id="container"></div>

how to get the dropdown selected default values in another div as a simple text

i have dropdown to select current month and year, i am getting the values properly.
now i need to pass that values into some other div
how to get the dropdown selected default values in another div as a simple text??
it should change if selected values change
Fiddle to describe
http://jsfiddle.net/k1v7ga49/1/
Dropdowns
<select name="one" class=" select1" id="ddlYear">
<option value="-1">Select Year</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
</select>
<select name="two" class="select2" id="ddlMonth">
<option value="-1">Select Month</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
javascript
var d = new Date(),
month = d.getMonth() + 1,
year = d.getFullYear();
$('.select2 option:eq(' + month + ')').prop('selected', true);
$('.select1').val(year);
$('.select2').on('change', function () {
var selectedYear = ($("option:selected", $('.select1')).text());
if (selectedYear != "Select Year") {
selectedMonth = ($("option:selected", this).text());
loadData(selectedYear, selectedMonth);
}
});
i want selected values in this div (in #monthValue)
<div class="placer"> Current timeperiod is :
<div id="monthValue"></div>
</div>
MY EXPECTED RESULT: Current timeperiod is :2014 OCTOBER

$('.select2, .select1').on('change', function () {
var selectedYear = $('.select1').val();
if (selectedYear != "Select Year") {
selectedMonth = $('.select2').val();
$('#monthValue').text(selectedYear + ' ' + selectedMonth)
}
}).trigger('change');
And to make the displayed values inline add this to the CSS
#monthValue {
display:inline-block;
}
http://jsfiddle.net/Spokey/k1v7ga49/4/

If i got you right you have to just use .text()
$('#monthValue').text(selectedYear + ' ' + selectedMonth);
Fiddle

I made a jsbin for ya, at http://jsbin.com/kidujoxidoku/1/edit
I feel as if you were making your checking of each select element's value too complicated. Simply using the jQuery's val() function should be all you need.
The code is also below for reference.
var d = new Date(),
month = d.getMonth() + 1,
year = d.getFullYear(),
loadData = function(year, month) {
$('.placer #monthValue').html(year + " " +month);
};
$('.select2 option:eq(' + month + ')').prop('selected', true);
$('.select1').val(year);
$('.select2').on('change', function () {
var selectedYear = $('.select1').val(), selectedMonth;
if (selectedYear != "Select Year") {
selectedMonth = $(this).val();
loadData(selectedYear, selectedMonth);
}
});

Just use check of existance of selected data. This is working code, so you can just copy/paste ;)
var d = new Date(),
month = d.getMonth() + 1,
year = d.getFullYear();
$('.select2 option:eq(' + month + ')').prop('selected', true);
$('.select1').val(year);
$('.select2').on('change', function () {
if ($(".select1 option:selected") && $(this).find("option:selected"))
var selectedYear = $(".select1").val();
selectedMonth = $(this).val();
$('#monthValue').text(selectedYear + ' ' + selectedMonth);
}
});

Show variable value in list?

<!doctype html>
<html>
<head>
<body>
<script>
var a=8;
var b=5;
var c=8;
var d=9;
</script>
<select size="5">
<option value="1">"a" seats remaining</option>
<option value="2">"b" seats remaining</option>
<option value="3">"c" seats remaining</option>
<option value="4">"d" seats remaining</option>
</select>
</body>
</html>
In the list, instead of a,b,c,d, can i show the values of the variables like 8,5,8,9?

Give your options an ID for easy access:
<select size="5">
<option id="a" value="1"></option>
<option id="b" value="2"></option>
<option id="c" value="3"></option>
<option id="d" value="4"></option>
</select>
Then you can simple do something like
var a=8;
var b=5;
var c=8;
var d=9;
document.getElementById("a").innerHTML = a + ' seats remaining';
document.getElementById("b").innerHTML = b + ' seats remaining';
document.getElementById("c").innerHTML = c + ' seats remaining';
document.getElementById("d").innerHTML = d + ' seats remaining';
Demo: http://jsfiddle.net/Ayp28/

Try this with using jQuery if you want to replace.
$("select > option").each(function() {
var array = {"a":"8", "b":"5", "c":"8", "d":"9"};
for (var val in array)
this.text = this.text.split('"' + val + '"').join('"' + array[val] + '"');
});