Cascading Dropdown is not working using jquery

Cascading Dropdown is not working using jquery - javascript

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/

Related

JavaScript class did not function in asp.net

I have created a javascript function in my aspx page..
below are the sample code,
<script type="text/javascript">
$(document).ready(function () {
console.log("ready!");
var output = [];
var yr = 1950;
for (var i = 0; i <= 70; i++) {
if (i == 0) {
output[i] = '<option value="0" selected="selected"> Choose Year</option>';
}
else {
output[i] = '<option value="' + (parseInt(1950) + parseInt(i - 1)) + '">' + (parseInt(1950) + parseInt(i - 1)) + '</option>';
}
}
$('#yearid').get(0).innerHTML = output.join('');
});
$("#yearid").change(function () {
var select = $("#yearid option:selected").val();
$("#yearval").val(select);
});
</script>
I would like this function execute in the property such as
<div class="col-md-4 form-group">
<span>Year : </span>
<select id="yearid" class="form-control" runat="server">
</select>
<input id="yearval" type="hidden" runat="server"/>
</div>
As the code running, the javascript function above should be executed and display the " Choose Year" propery inside as shown above.
I try to run this code but nothing happens to the property. Any help would be appreciated. Thank u.

Your code seems to be working as below. However you may be missing the jQuery script so you can check if that exists.
$(document).ready(function () {
console.log("ready!");
var output = [];
var yr = 1950;
for (var i = 0; i <= 70; i++) {
if (i == 0) {
output[i] = '<option value="0" selected="selected"> Choose Year</option>';
}
else {
output[i] = '<option value="' + (parseInt(1950) + parseInt(i - 1)) + '">' + (parseInt(1950) + parseInt(i - 1)) + '</option>';
}
}
$('#yearid').get(0).innerHTML = output.join('');
});
$("#yearid").change(function () {
var select = $("#yearid option:selected").val();
$("#yearval").val(select);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4 form-group">
<span>Year : </span>
<select id="yearid" class="form-control" runat="server">
</select>
<input id="yearval" type="hidden" runat="server"/>
</div>

How to print value and description in selected option from Ajax JSON while page loaded

I already see data is loaded on Json/Ajax. I want to add data (value and description) in selected option. I did it this way. And all data is shown on one option tab. I am lost here. Below is the Ajax code and html.
$(function(){
categoryload();
});
function categoryload() {
//var hosname =window.location.protocol + "//" + window.location.hostname + window.location.pathname;
var hosname = window.location.protocol + "//" + window.location.hostname+ "/sgw/modules/controller/categorycontroller.php";
alert (hosname);
//var ur = hosname + "/modules/controller/categorycontroller.php";
$.ajax({
url:hosname , //the page containing php script
type: "POST", //request type,
dataType: 'json',
data: '',
success:function(data){
alert(data);
var obj = data;
var areaOption = "<option value=''>Select Category </option>";
for (var i = 0; i < obj.length; i++) {
areaOption += '<option value="' + obj[i] + '">' + obj[i] + '</option>'
}
$("#category").html(areaOption);
}
});
}
HTML
<div class="form-group">
<label class="control-label col-md-4">Service Category:</label>
<div class="col-md-7">
<select class="form-control" name="category" id="category">
<option value="0">Select Category</option>
<option value="1"> </option>
<option value="2"> </option>
</select>
</div>
</div>
Categorycontroller.php
require '../service/categoryService.php';
$categoryname = #trim(stripslashes($_POST['category']));
$category = new categoryService();
$list = array();
$list[]= $category->categorylist();
$return["json"] = json_encode($list);
echo $return["json"];

JSON accessing array objects using a named index

Suppose I have this HTML
<form action="#" action="get">
<select name="college" id="college" onchange="selection('college', 'course')">
<option value="">Select an Option</option>
<option value="amity">Amity University</option>
<option value="indraprastha">Indraprasth University</option>
</select>
<br>
<select name="course" id="course" onchange="selection('course', 'stream')" >
<option value="">Select an Option</option>
</select>
<br>
<select name="stream" id="stream">
<option value="">Select an Option</option>
</select>
</form>
I have this JSON,
{
"amity":{
"course":[
{
"name":"B.Tech",
"value":"btech",
"stream":[
{
"name":"Computer Science",
"value":"cse"
},
{
"name":"Information Technology",
"value":"cse"
},
{
"name":"Aerospace Engg.",
"value":"cse"
}
]
},
{
"name":"M.Tech",
"value":"mtech",
"stream":[
{
"name":"Networking",
"value":"net"
},
{
"name":"telecommunications",
"value":"tc"
}
]
}
]
}
}
The Javascript is,
function selection(s1, s2) {
var first = document.getElementById(s1),
second = document.getElementById(s2);
var college = $('#college').val(),
cr = $('#course').val(),
st = $('#stream').val(),
se = $('#sem').val();
$.getJSON("json/select.json", function(data) {
switch(s1) {
case 'college':
$.each(data[college].course, function(key, value) {
second.innerHTML += '<option value="'+ value.value +'">'+ value.name +'</option>';
}); break;
case 'course':
$.each(data[college].course[].stream, function(key, value) {
second.innerHTML += '<option value="'+ value.value +'">'+ value.name +'</option>';
}); break;
}
});
}
I am making a dynamic drop-down menu where the next drop down values are fetched from JSON object file, using the reference of previous values. As suggested from my this question (link), I am able to get the value of course (second drop-down) using the course array in the object.
Now, since the values in the second select menu(course) are filled dynamically, I can't figure out how to take the corresponding course array element to fill the next select menu options for stream array.
Since the course property in JSON is an array, I don't know which index element element is chosen from second menu (See the switch case for 'course', the data[college].course[] index is empty). The hardcoded [0] works, but that's not dynamic then.
How to access the stream array using the values of course grabbed from second menu.
I hope I am clear. Thanks in advance!

Just iterate through array of courses to get the stream dynamically:
for (var i = 0; i < data[college].course.length; i++) {
currentStream = data[college].course[i].stream;
}
I.e. using your code:
for (var i = 0; i < data[college].course.length; i++) {
$.each(data[college].course[i].stream, function(key, value) {
second.innerHTML += '<option value="'+ value.value +'">'+ value.name +'</option>';
});
}
Finding the current stream for your selected course:
// assuming cr = "btech"
for (var i = 0; i < data[college].course.length; i++) {
if (data[college].course[i].value == cr) {
currentStream = data[college].course[i].stream;
break;
}
}
$.each(currentStream, function(key, value) {
second.innerHTML += '<option value="'+ value.value +'">'+ value.name +'</option>';
});

function selection(s1, s2) {
var first = document.getElementById(s1),
second = document.getElementById(s2);
var college = $('#college').val(),
cr = $('#course').val(),
st = $('#stream').val(),
se = $('#sem').val();
$.getJSON("json/select.json", function(data) {
switch(s1) {
case 'college':
$.each(data[college].course, function(key, value) {
second.innerHTML += '<option value="'+ value.value +'">'+ value.name +'</option>';
}); break;
case 'course':
var course = data[college].course;
for(var i = 0;i<course.length;i++){
if(course[i].name === cr){ //cr is selected option
$.each(course[i].stream, function(key, value) {
second.innerHTML += '<option value="'+ value.value +'">'+ value.name +'</option>';
}
}
}); break;
}
});
}

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);
}
}
}
}
})

Populating values in dropdowns

I need to create dropdowns using javascript/jquery
Values in the first dropdown should be as follows:
<option value="0">Select</option>
<option value="1">Occ1</option>
<option value="2">Occ2</option>
Second dropdown should be shown only if the value selected from the first dropdown is other Select
<option value="0">Select</option>
<option value="11">subOcc1</option>
<option value="12">subOcc2</option>
Third dropdown should be shown only if the value selected from the second dropdown is other than Select
<option value="0">Select</option>
<option value="111">superSubOcc1</option>
<option value="112">superSubOcc2</option>
<option value="113">superSubOcc3</option>
<option value="114">superSubOcc4</option>
Can someone please help me with this?

Hope this works for you.
HTML
<select id="select1">
<option value="0">select</option>
</select>
<br/>
<select id="select2">
<option value="0">select</option>
</select>
<br/>
<select id="select3">
<option value="0">select</option>
</select>
JS
for (var key in data) {
$("#select1").append('<option value="' + key + '">' + data[key].name + '</option>');
}
$("#select1").change(function () {
$('#select2').find('option').filter(function () {
return $(this).val() != '0';
}).remove();
$('#select3').find('option').filter(function () {
return $(this).val() != '0';
}).remove();
var currentSelect = $(this).val();
var currentOccupation = data[currentSelect].occupation;
for (var key in currentOccupation) {
$("#select2").append('<option value="' + key + '">' + currentOccupation[key].name + '</option>');
}
});
$("#select2").change(function () {
$('#select3').find('option').filter(function () {
return $(this).val() != '0';
}).remove();
var currentSelect1 = $("#select1").val();
var currentSelect2 = $(this).val();
var currentOccupation = data[currentSelect1].occupation[currentSelect2].occupation;
for (var key in currentOccupation) {
$("#select3").append('<option value="' + currentOccupation[key].occCode + '">' + currentOccupation[key].name + '</option>');
}
});

Develop Reference

JavaScript is the programming language of the Web.

Cascading Dropdown is not working using jquery - javascript

Related

JavaScript class did not function in asp.net

How to print value and description in selected option from Ajax JSON while page loaded

JSON accessing array objects using a named index

comparing select box timings

Populating values in dropdowns

Categories

Resources