Unable to get the value of the selected <select> element

Unable to get the value of the selected <select> element - javascript

Here is a drop-down list and you need to determine which element is selected but an error occurs. Please help to understand.
app.js:350 Uncaught TypeError: Cannot read property 'options' of undefined
at onChangeSelectCategory (app.js:350)
at HTMLSelectElement.onchange
with HTML:
<body>
<p align="center"><label>Category</label></p>
<p align="center">
<select onchange="onChangeSelectCategory()" style="visibility: visible" id="adCategory" class="category" name="category" style="width: 300pt">
<option value="1">Category 1</option>
<option value="2">Category 2</option>
<option value="3">Category 3</option>
<option value="4">Category 4</option>
</select></p>
<p align="center"><label>Sub Category</label></p>
<p align="center">
<select style="visibility: visible" id="subCategory" class="category" name="subcategory" style="width: 300pt">
</select></p>
<script src="scripts/app.js"></script>
</body>
and JS:
var adCategoryRef = document.getElementById('adCategory');
var subCategoryRef = document.getElementById('subCategory');
function onChangeSelectCategory() {
var adSelectedCategoryVal = adCategoryRef.options[adCategoryRef.selectedIndex].text; //error
switch (adSelectedCategoryVal) {
case 'Category 1': {

As Tom mentioned in his comment, adCategoryRef might be not rendered. I just recommend you to try passing the select element in function parameters, like:
function onChangeSelectCategory(adCategoryRefSel) {
var adSelectedCategoryVal = adCategoryRefSel.options[adCategoryRefSel.selectedIndex].text; //error
}
And html:
<select onChange="onChangeSelectCategory(this);" style="visibility: visible" id="adCategory" class="category" name="category" style="width: 300pt">

Here I changed but there is already another error with another .
Uncaught TypeError: Cannot read property 'options' of undefined
at onChangeSelectCategory (app.js:352)
at HTMLSelectElement.onchange
JS
var subCategoryRef = document.getElementById('subCategory');
function onChangeSelectCategory(adCategoryRefSel) {
var adSelectedCategoryVal = adCategoryRefSel.options[adCategoryRefSel.selectedIndex].text;
switch (adSelectedCategoryVal) {
case 'Category 1': {
var length = subCategoryRef.options.length; \\ error
for (i = length-1; i >= 0; i--) {
subCategoryRef.options[i] = null;
}
HTML
<body>
<p align="center"><label>Category</label></p>
<p align="center"><select onChange="onChangeSelectCategory(this);" style="visibility: visible" id="adCategory" class="category" name="category" style="width: 300pt">
<option value="1">Category 1</option>
<option value="2">Category 2</option>
<option value="3">Category 3</option>
<option value="4">Category 4</option>
</select></p>
<p align="center"><label>Sub Category</label></p>
<p align="center"><select style="visibility: visible" id="subCategory" class="category" name="subcategory" style="width: 300pt">
</select></p>
<script src="scripts/app.js"></script>
</body>

Related

javascript select hidden function issues

The issue I am having is the second select menu is not showing via the function.
I followed the [link][1] here and I am still not getting this to work
[enter image description here][2]
Update:
Tried to get more advance with this code and am having issues. The error I keep getting is:
"TypeError: Cannot read property 'style' of null
at scheduling (:7:20)
at HTMLSelectElement.onchange (https://null.jsbin.com/runner:1:298)"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>
<form>
<p>Please do the following: <textarea> </textarea> <br /> <br /> Please do the follwing:</p>
<select id="actions" onchange = scheduling()>
<option value=" "></option>
<option value="report">Report</option>
<option value="schedule">Schedule</option>
<option value="research">Research</option>
<option value="go to">Go to</option>
</select>
<p><input type="submit" /></p>
</form>
</div>
<fieldset>
<div name = "Schedule">
<form id = scheduleProtocol style= "visibility:hidden">
<p> With who? </p> <textarea> </textarea> <br>
<p> Schedule what?</p>
<select>
<option value = "Breakfast"> Breakfast</option>
<option value = "Lunch"> Lunch</option>
<option value = "Dinner"> Dinner</option>
<option value = "A Call "> A Call </option>
</select>
<br>
<div name = "Schedule_Purpose">
<p> For what purpose? </p>
<select>
<option value="Catching Up"> Catching Up</option>
<option value="Building Relationship/s"> Building Relationships </option>
<option value="Sales">Sales</option>
<option value="Customer Success"> Customer Success</option>
<option value="Advice">Advice</option>
<option value="Learning">Learning</option>
<option value= "Team Building"> Team Building</option>
<option value= "Problem Solving"> Problem Solving</option>
<option value= "Funding/Investment"> Funding/Investment</option>
<option value = "Shared Goal/ Bucket List"> Shared Goal/ Bucket List</option>
<option value ="Relationship Maintenance"> Relationship Maintenance</option>
<option value ="Strategic Partnership"> Strategic Partnership</option>
</select>
</div>
<br>
<p> Where? </p>
<select>
<option value="to You"> Convenient to You </option>
<option value="to them"> Convenient to them </option>
<option value="both Parties">Both Parties</option>
</select>
<br>
<p>When?</p>
<select>
<option value="Exact Date">Exact Date</option>
<option value="Next Week"> Within the next week </option>
<option value="Next Two Weeks">Within the next two weeks</option>
<option value="Quarterly">Quarterly</option>
</select>
<br>
<br>
<input type = "submit">
</fieldset>
<div name = "Report Values">
<select>
<p> Report to me: when? </p>
<option value = "Monday">Monday</option>
<option value ="Tuesday"> Tuesday</option>
<option value = "Wednesday"> Wednesday</option>
<option value = "Thursday">Thursday</option>
<option value ="Friday"> Friday </option>
<option value = "Saturday"> Saturday</option>
<option value = "Sunday"> Sunday </option>
</select>
<br>
<p> At what time?</p>
<select>
<option value = "1 pm"> 1 pm</option>
<option value ="2 pm"> 2 pm</option>
<option value = "3 pm"> 3 pm</option>
<option value = "4 pm"> 4 pm</option>
<option value ="5 pm"> 5 pm </option>
<option value = "6 pm"> 6 pm</option>
<option value = "7 pm"> 7 pm</option>
</select>
</div>
</form>
</div>
<script>
function scheduling() {
var selectedItems = document.getElementById('actions');
var userInput = selectedItems.options[selectedItems.selectedIndex].value;
var scheduleProtcol = document.getElementById('scheduleProtcol');
if (userInput == "schedule") {
scheduleProtcol.style.visibility = "visible"; }
else {
scheduleProtcol.style.visibility = "hidden";
}
}
</script>
</body>
</html>

Here is the code:
<select id="list" onchange="return showApples()">
<option value="AL">Grapes</option>
<option value="NL">Apple</option>
</select>
<select id="AppleTypes"style="visibility:hidden">
<option value="GR">Granny</option>
</select>
<script>
function showApples()
{
var selectedItems = document.getElementById("list");
var userInput = selectedItems.options[selectedItems.selectedIndex].value;
if (userInput == "NL")
document.getElementById("AppleTypes").style.visibility = "visible";
else
document.getElementById("AppleTypes").style.visibility = "hidden";
}
</script>

function showApples(){
var selectedItems = document.getElementById("list");
var appleTypes = document.getElementById("AppleTypes")
var userInput = selectedItems.options[selectedItems.selectedIndex].value;
if (userInput == "NL"){
appleTypes.style.visibility = "visible";
}
else{
appleTypes.style.visibility = "hidden";
}
}
<form>
<select id="list" onchange="showApples()">
<option value="nothing"></option>
<option value="NL">Apple</option>
<option value="AL">Ball</option>
<option value="DL">Cat</option>
</select>
<select id="AppleTypes"style="visibility:hidden">
<option value="GR">Granny</option>
<option value="FU">Fuji</option>
</select>
</form>
Your Wrong code : <select id="list" onChange="return showApples()">
Should be changed like this : <select id="list" onchange="showApples()">
onChange => onchange

Connecting two Combo-boxes with html and js

I am trying to make these two combo-boxes join each other. But, my problem is, that my second combo-box cannot change if I select the category.
This is what I've done.
HTML CODE
<!-- language: lang-html -->
<label for="JenisBarang">Jenis Barang</label>
<br>
<select id="JenisBarang" name="JenisBarang">
<option value="0" selected="selected">Mouse</option>
<option value="1">Keyboard</option>
<option value="2">Webcam</option>
</select>
<br>
<label for="PilihBarang">Pilih Barang</label>
<br>
<select id="PilihBarang_0" name="PilihBarang_0" style="display: inline;">
<option value="1">Asus GX-1000</option>
<option value="2">Logitech M238 Edisi : Burung Hantu</option>
<option value="3">Logitech M238 Edisi : Astronot</option>
<option value="4">Logitech M238 Edisi : Musang</option>
<option value="5">Logitech M238 Edisi : Kera</option>
<option value="6">Lenovo N700</option>
<option value="7">Asus Gladius</option>
</select>
<select id="PilihBarang_1" name="PilihBarang_1" style="display: none;">
<option value="1">Logitech K400r</option>
<option value="2">Logitech MK240</option>
<option value="3">Asus GK2000</option>
</select>
<select id="PilihBarang_2" name="PilihBarang_2" style="display: none;">
<option value="1">Lenovo Webcam</option>
<option value="2">Logitech C920</option>
</select>
<br>
Java Script CODE
<script>
function change_product(evt)
{
var JenisBarang=document.getElementById('JenisBarang'),whichstate;
whichstate=JenisBarang.options[state.selectedIndex].value;
for(var i=0;i<JenisBarang.options.length;i++)
document.getElementById('PilihBarang_'+i).style.display=(i==whichstate ? 'inline':'none');
}
</script>
Dictionary
JenisBarang means the category ex Mouse
PilihBarang means the items ex Mouse Logitech M185

Can you check the following Code. use value specify options in the second combo box. It is a simple code hope nothing to explain.. I have placed couple of comments.
$("#comboBox1").change(function() {
if ($(this).data('options') === undefined) {
/* Get all the options in second Combo box*/
$(this).data('options', $('#comboBox2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#comboBox2').html(options);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select name="comboBox1" id="comboBox1">
<option value="0">Please Select</option>
<option value="1">Mouse</option>
<option value="2">Keyboard</option>
<option value="3">WebCam</option>
</select>
<!-- Second Combo Box-->
<select name="comboBox2" id="comboBox2">
<option value="1">Mouse Model 1</option>
<option value="1">Mouse Model 2</option>
<option value="1">Mouse Model 3</option>
<option value="2">Keyboard model 1</option>
<option value="2">Keyboard model 2</option>
<option value="2">Keyboard model 3</option>
<option value="3">webcam model 1</option>
<option value="3">webcam model 2</option>
</select>
Edit : JS Fiddle link JS Fiddle

Form field arrays validate individually with jQuery, but then form won't submit

This is my first post, so please be kind. :-)
I have a form with several arrays and other items. Some form fields can be entered more than once which is why they are arrays. I am using Jquery 1.11.1 and jquery validate. Two of my arrays are only required depending on a choice from a drop-down list. If the correct items are not filled in or selected, I get all of the error messages I expect. And, when all items are completed, all error messages are gone.
The problem is, the form will not then submit. I believe it has something to do with the "conditional" arrays because I have another form where the arrays are all required and it works fine.
This has been driving me crazy for a while now - long enough to post the question here. I have looked at many, many postings here and haven't found anyone with my exact problem.
I'm hoping someone can help.
Here is the HTML form (the JS and validation are included before the form):
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://ggsghpcc.sgt-inc.com/cmct/js/jquery.validate.js"></script>
<script language="JavaScript">
numComps = 1;
function showCampaigns(id) {
var mission1 = "missionOne";
var mission2 = "missionTwo";
var compNumber = id.slice(10);
var selection = document.getElementById(id).value;
if (selection == "missionOne") {
document.getElementById(selection + "_" + compNumber).style.display = "block";
document.getElementById(mission2 + "_" + compNumber).style.display = "none";}
if (selection == "missionTwo") {
document.getElementById(selection + "_" + compNumber).style.display = "block";
document.getElementById(mission1 + "_" + compNumber).style.display = "none"; }
}
$(document).ready(function() {
var u_campaignMissionOne = new Array;
var u_campaignMissionTwo = new Array;
var u_dataset = new Array;
var u_mission = new Array;
var FS = 1;
var x = 2;
var u_variable = new Array;
var u_intIndex = new Array;
$("#submitData").validate({
rules: {
'u_variable[]': {
required: true
},
'u_intIndex[]': {
required: true,
min: 1
},
'u_mission[]': {
required: true
},
'u_campaignMissionOne[]': {
required: function(element) {
var setNumber = $(element).attr('id');
var setNum = "comp" + setNumber.slice(21);
var missionNum = "u_mission_" + setNumber.slice(21);
return $((document.getElementById(missionNum).value) == 'MissionOne');
}
},
'u_campaignMissionTwo[]': {
required: function(element) {
var setNumber = $(element).attr('id');
var setNum = "comp" + setNumber.slice(21);
var missionNum = "u_mission_" + setNumber.slice(21);
return $((document.getElementById(missionNum).value) == 'MissionTwo');
}
},
'u_dataSet[]': {
required: true
}
},
messages: {
'u_variable[]': {
required:" Please enter a variable",
},
'u_intIndex[]': {
required:" Please enter a time interval",
},
'u_mission[]': {
required:" Please select a mission"
},
'u_campaignMissionOne[]': {
required:" Please select a Mission One campaign"
},
'u_campaignMissionTwo[]': {
required:" Please select a Mission Two campaign"
},
'u_dataSet[]': {
required:" Please select a data set"
}
},
wrapper: 'span',
errorPlacement: function (error, element) {
error.css({'padding-left':'10px','padding-top':'0.5em','padding-bottom':'2px', 'color': 'red', 'font-style':'italic', 'font-size':'14px', 'width': '330px', 'float': 'right'});
error.insertAfter(element);
}
});
});
</script>
<h2>Submit data</h2>
<div class="full-width-content-item">
<form id="submitData" action="alert.php" method="post" enctype="multipart/form-data">
<div>
<div id="formStuff" style="margin:0; padding:0; display:inline;">
<div style="height:40px; width:100%;"></div>
<div id="comp1">
<fieldset><legend>Data</legend>
<div id="intervalIndex">
<div class="fieldLabel"><label class="control-label">Time index*</label></div>
<input type="text" size="10" id="u_intIndex_1" name="u_intIndex[]" placeholder="Integer value > 0" value=""/>
</div><!--end intervalIndex--><br clear="right" />
<div id="variable">
<div class="fieldLabel"><label class="control-label">Variable*</label></div>
<input type="text" id="u_variable_1" name="u_variable[]" class="u_variable" value="" />
</div><!--end variable--><br clear="right" />
<div>
<div class="fieldLabel"><label class="control-label">Mission*</label> </div>
<select name="u_mission[]" id="u_mission_1" onchange="showCampaigns(this.id);">
<option value="">Please select</option>
<option value="missionOne" >Mission One</option>
<option value="missionTwo" >Mission Two</option>
</select>
</div><br clear="right" />
<div class="campaign">
<div class="missionOne" id="missionOne_1" style="height:3.0em; display:none;">
<div class="fieldLabel"><label class="control-label">Mission One Campaign*</label></div>
<select name="u_campaignMissionOne[]" id="u_campaignMissionOne_1" >
<option value="">Please select</option>
<option value="Campaign-MissionOne-1" >Campaign-MissionOne-1</option>
<option value="Campaign-MissionOne-2" >Campaign-MissionOne-2</option>
<option value="Campaign-MissionOne-3" >Campaign-MissionOne-3</option>
<option value="Campaign-MissionOne-4" >Campaign-MissionOne-4</option>
<option value="Campaign-MissionOne-5" >Campaign-MissionOne-5</option>
</select>
</div>
<div class="missionTwo" id="missionTwo_1" style="display:none;">
<div class="fieldLabel"><label class="control-label">Mission Two Campaign*</label></div>
<select name="u_campaignMissionTwo[]" id="u_campaignMissionTwo_1">
<option value="">Please select</option>
<option value="Campaign-MissionTwo-1" >Campaign-MissionTwo-1</option>
<option value="Campaign-MissionTwo-2" >Campaign-MissionTwo-2</option>
<option value="Campaign-MissionTwo-3" >Campaign-MissionTwo-3</option>
<option value="Campaign-MissionTwo-4" >Campaign-MissionTwo-4</option>
<option value="Campaign-MissionTwo-5" >Campaign-MissionTwo-5</option>
</select>
</div>
</div><!--end class=campaign--><br clear="right" />
<div>
<div class="fieldLabel"><label class="control-label">Data set*</label> </div>
<select name="u_dataSet[]" id="u_dataSet_1">
<option value="">Please select</option>
<option value="dataSet1" >dataSet 1</option>
<option value="dataSet2" >dataSet 2</option>
<option value="dataSet3" >dataSet 3</option>
<option value="dataSet4" >dataSet 4</option>
<option value="dataSet5" >dataSet 5</option>
</select>
</div><br clear="right" />
</fieldset></div><!--end comp1 div-->
<div style="height:40px; width:100%;"></div>
<div id="comp2">
<fieldset><legend>Data</legend>
<div id="intervalIndex">
<div class="fieldLabel"><label class="control-label">Time index*</label></div>
<input type="text" size="10" id="u_intIndex_2" name="u_intIndex[]" placeholder="Integer value > 0" value=""/>
</div><!--end intervalIndex--><br clear="right" />
<div id="variable">
<div class="fieldLabel"><label class="control-label">Variable*</label></div>
<input type="text" id="u_variable_2" name="u_variable[]" value="" />
</div><!--end variable--><br clear="right" />
<div>
<div class="fieldLabel"><label class="control-label">Mission*</label></div>
<select name="u_mission[]" id="u_mission_2" onchange="showCampaigns(this.id);">
<option value="">Please select</option>
<option value="missionOne" >Mission One</option>
<option value="missionTwo" >Mission Two</option>
</select>
</div><br clear="right" />
<div class="campaign">
<div class="missionOne" id="missionOne_2" style="height:3.0em; display:none;">
<div class="fieldLabel"><label class="control-label">Mission One Campaign*</label></div>
<select name="u_campaignMissionOne[]" id="u_campaignMissionOne_2" >
<option value="">Please select</option>
<option value="Campaign-MissionOne-1" >Campaign-MissionOne-1</option>
<option value="Campaign-MissionOne-2" >Campaign-MissionOne-2</option>
<option value="Campaign-MissionOne-3" >Campaign-MissionOne-3</option>
<option value="Campaign-MissionOne-4" >Campaign-MissionOne-4</option>
<option value="Campaign-MissionOne-5" >Campaign-MissionOne-5</option>
</select>
</div>
<div class="missionTwo" id="missionTwo_2" style="display:none;">
<div class="fieldLabel"><label class="control-label">Mission Two Campaign*</label></div>
<select name="u_campaignMissionTwo[]" id="u_campaignMissionTwo_2">
<option value="">Please select</option>
<option value="Campaign-MissionTwo-1" >Campaign-MissionTwo-1</option>
<option value="Campaign-MissionTwo-2" >Campaign-MissionTwo-2</option>
<option value="Campaign-MissionTwo-3" >Campaign-MissionTwo-3</option>
<option value="Campaign-MissionTwo-4" >Campaign-MissionTwo-4<option>
<option value="Campaign-MissionTwo-5" >Campaign-MissionTwo-5<option>
</select>
</div>
</div><!--end class=campaign--><br clear="right" />
<div>
<div class="fieldLabel"><label class="control-label">Data set*</label></div>
<select name="u_dataSet[]" id="u_dataSet_2">
<option value="">Please select</option>
<option value="dataSet1" >dataSet 1</option>
<option value="dataSet2" >dataSet 2</option>
<option value="dataSet3" >dataSet 3</option>
<option value="dataSet4" >dataSet 4</option>
<option value="dataSet5" >dataSet 5</option>
</select>
</div><br clear="right" />
</fieldset></div><!--end comp2 div-->
<div style="height:20px; width:100%;"></div>
<button type="submit" >Submit</button></div>
</form>

Action when clicking on an option in a select menu

I am programming a website with a map and a side panel, where I want some action to happend I chose an option in a select-menu.
This is my code:
<select id="optionList" onchange="display_div(document.getElementById('optionList').value);">
<option selected="selected">Chose league</option>
<option value="PL">Premier League</option>
<option value="CH">Championship</option>
<option value="L1">League 1</option>
<option value="L2">League 2</option>
</select>
<p></p>
<div id="PL" style="display:none;">
<select id="plTeamList" onchange="display_div2(document.getElementById('plTeamList').value);">
<option selected="selected">Chose team</option>
<option value="MUN">Manchester United</option>
<option value="CHE">Chelsea</option>
<option value="BOU">Bournemouth</option>
<option value="NEW">Newcastle</option>
</select>
<div id="MUN" style="display:none" onclick="clickOnMUN()"> .... </div>
</div>
where I have a script with what happens when you choose Manchester United from the menu (it is plotting some popups in the map):
function clickOnMUN() {
var info = whichteam("MU"); // Finner ut hvilket lag som spiller, og info om stadion
var marker = L.marker([info.substring(0, 5), info.substring(5, 10)]).addTo(map);
marker.bindPopup(info.substring(10));
}
This code is oddly not doing the script when I chose an option in the team-list.
The display_div-functions are only showing the options.

The only issue I see is the second "display_div" call... it says "display_div2" maybe a typo... but if it is the same as the first and only show the hidden div, removing the 2 should solve part of the problem. Also it could improve the code if you use some listeners for the clicks events instead of placing the function call inside the html tag. But this could be a version of your current code:
function display_div( theDiv ) {
console.log ( theDiv );
$('#'+theDiv).css("display", "block" );
}
function clickOnTeamList(targ) {
$('#status').html("clicked a team " + targ );
}
p {
font-family: verdana;
font-size:12px;
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="optionList" onchange="display_div(document.getElementById('optionList').value)">
<option selected="selected">Chose league </option>
<option value="PL">Premier League • only option active</option>
<option value="CH">Championship</option>
<option value="L1">League 1</option>
<option value="L2">League 2</option>
</select>
<p></p>
<div id="PL" style="display:none;">
<select id="plTeamList" onchange="display_div(document.getElementById('plTeamList').value);">
<option selected="selected">Chose team</option>
<option value="MUN">Manchester United</option>
<option value="CHE">Chelsea</option>
<option value="BOU">Bournemouth</option>
<option value="NEW">Newcastle</option>
</select>
<div id = "MUN" style="display:none" onclick="clickOnTeamList(' Manchester United')" ><p>Team: Manchester United</p></div>
<div id = "CHE" style="display:none" onclick="clickOnTeamList('Chelsea')" ><p>Team: Chelsea</p></div>
<div id = "BOU" style="display:none" onclick="clickOnTeamList('Bournemouth')" ><p>Team: Bournemouth</p></div>
<div id = "NEW" style="display:none" onclick="clickOnTeamList('Newcastle')" ><p>Team: Newcastle</p></div>
</div>
<div id="status">___</div>

JQuery show /hide div from drop down list change

I have three combobox that has each one should display and hide the respective div if selection is made.
<script type='text/javascript'>
$(document).ready(function(){
$ ("select.cascade").on("change", function() {
var which = this.id,
div = which + "d",
sel = $(this).val();
if (sel == '0') {
$("#" + div).hide();
} else {
$("#" + div).show();
}
// Call form.submit here if need be
});
});
</script>
Three dropdown list with div are given :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="c1" name="combobox" class="cascade">
<option value="0">Select one...</option>
<option id="WallyS" value="WallyS"> Walmart </option>
<option id="AppliS" value="AppliS">Appliance</option>
<option id="BBBS" value="BBBS">Beyond Presedential</option>
</select>
<select id="c2" name="combobox1" class="cascade">
<option value="0">Select one...</option>
<option id="WallyS" value="WallyS"> Walmart </option>
<option id="AppliS" value="AppliS">Appliance</option>
<option id="BBBS" value="BBBS">Beyond Presedential</option>
</select>
<select id="c3" name="combobox2" class="cascade">
<option value="0">Select one...</option>
<option id="WallyS" value="WallyS"> Walmart </option>
<option id="AppliS" value="AppliS">Appliance</option>
<option id="BBBS" value="BBBS">Beyond Presedential</option>
</select>
<div style="display:block">default</div>
<div id="c1d" class="WalLDP" style="display:none">content1 </div>
<div id="c2d" class="AppliDP" style="display:none">content2 </div>
<div id="c3d" class="BBBDP" style="display:none">content3</div>
it is running on http://jsfiddle.net/ ..but if i save it in notepad as php or html file and run through wamp server it just showing the comboboxes but not showing divs...please solve this problem

you have to correct the url please
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
or
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
see in action JSFIDDLE

Are you connected to the internet? I tried testing it on jsfiddle and it works correctly
Because the code below needs internet connection.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
Here is the code I have on my laptop, just save it as a .html file. I hope this helps.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="c1" name="combobox" class="cascade">
<option value="0">Select one...</option>
<option id="WallyS" value="WallyS"> Walmart </option>
<option id="AppliS" value="AppliS">Appliance</option>
<option id="BBBS" value="BBBS">Beyond Presedential</option>
</select>
<select id="c2" name="combobox1" class="cascade">
<option value="0">Select one...</option>
<option id="WallyS" value="WallyS"> Walmart </option>
<option id="AppliS" value="AppliS">Appliance</option>
<option id="BBBS" value="BBBS">Beyond Presedential</option>
</select>
<select id="c3" name="combobox2" class="cascade">
<option value="0">Select one...</option>
<option id="WallyS" value="WallyS"> Walmart </option>
<option id="AppliS" value="AppliS">Appliance</option>
<option id="BBBS" value="BBBS">Beyond Presedential</option>
</select>
<div style="display:block">default</div>
<div id="c1d" class="WalLDP" style="display:none">content1 </div>
<div id="c2d" class="AppliDP" style="display:none">content2 </div>
<div id="c3d" class="BBBDP" style="display:none">content3</div>
</body>
<script type='text/javascript'>
$(document).ready(function(){
$ ("select.cascade").on("change", function() {
var which = this.id,
div = which + "d",
sel = $(this).val();
if (sel == '0') {
$("#" + div).hide();
} else {
$("#" + div).show();
}
// Call form.submit here if need be
});
});
</script>
</html>

Develop Reference

JavaScript is the programming language of the Web.

Unable to get the value of the selected <select> element - javascript

Related

javascript select hidden function issues

Connecting two Combo-boxes with html and js

Form field arrays validate individually with jQuery, but then form won't submit

Action when clicking on an option in a select menu

JQuery show /hide div from drop down list change

Categories

Resources