How to make dependent dropdown menu show in html/jquery

How to make dependent dropdown menu show in html/jquery - javascript

So, I'm trying to do EXACTLY this, and while it works on jsfiddle, it will not in any of the browsers I've tried...Any ideas?
Even when it's the only thing on the page, it refuses to work for whatever reason.
http://jsfiddle.net/RWUdb/101/
<div>
<label>Device:</label>
<select name="Device" id="Device" class="" onclick="craateUserJsObject.ShowPrivileges();">
<option value="Select">--Select a Device--</option>
<option id="iOS" value="iOS">iOS Device</option>
<option id="macdesktops" value="macdesktops">Mac Desktop</option>
<option id="maclaptops" value="maclaptops">Mac Laptop</option>
<option id="pcdesktops" value="pcdesktops">PC Desktop</option>
<option id="pclaptops" value="pclaptops">PC Laptop</option>
</select>
</div>
<div class="resources" style=" display: none;"><select>
<option>-Select a Model-</option>
<option value="Touch">iPod Touch</option>
<option value="Nano">iPod Nano</option>
<option value="Classic">iPod Classic</option>
<option value="Shuffle">iPod Shuffle</option>
</select> <font color="red">*</font></div>
<div class="resources2" style=" display: none;">
<select>
<option>-Select a Model-</option>
<option value="iMac">iMac</option>
<option value="MacPro">Mac Pro</option>
<option value="Mini">Mac Mini</option>
</select> <font color="red">*</font>
</div>
<div class="resources3" style=" display: none;">
<select>
<option>-Select a Model-</option>
<option value="White">White Macbook</option>
<option value="Pro">Macbook Pro</option>
<option value="Air">Macbook Air</option>
</select> <font color="red">*</font>
</div>
<div class="resources4" style=" display: none;">
<input type="text" id="pcdesktops" placeholder="ie. Dell Optiplex 9010"/> <font color="red">*</font>
</div>
<div class="resources5" style=" display: none;">
<input type="text" id="pclaptops" placeholder="ie. Lenovo G580" /> <font color="red">*</font>
</div>
Javascript:
var Privileges = jQuery('#Device');
var select = this.value;
Privileges.change(function () {
if ($(this).val() == 'iOS') {
$('.resources').show();
}
else $('.resources').hide();
if ($(this).val() == 'macdesktops') {
$('.resources2').show();
}
else $('.resources2').hide();
if ($(this).val() == 'maclaptops') {
$('.resources3').show();
}
else $('.resources3').hide();
if ($(this).val() == 'pcdesktops') {
$('.resources4').show();
}
else $('.resources4').hide();
if ($(this).val() == 'pclaptops') {
$('.resources5').show();
}
else $('.resources5').hide();
});

Did you enclose it in
$(document).ready(function() {
// your code
});

Add this in your head:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

Related

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

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>

Show hidden div element based on option selected in select option element

I have a div "businessmodel" with some html element inside that is hidden by default and I want it to display when the option selected in the select option "accounttype" is provider.
Please see the code here:
JavaScript
<script type="text/javascript">
$('#accounttype').bind('change', function(event) {
var i= $('#accounttype').val();
if(i=="0")
{
$('#businessmodel').hide();
}
elseif(i=="1")
{
$('#businessmodel').show();
}
});
</script>
HTML
Account Type
<select name="type" required="" class='selector' id="accounttype" onchange="change(this)">
<option value='0'>User</option>
<option value='1'>Provider</option>
</select>
<div id="businessmodel" style="display:none;">
<p id="modellevel" >Business model</p>
<select name="model" required="" class='selector' id="model">
<option value='choose' >Choose Business Model</option>
<option value='ALPHA' >ALPHA</option>
<option value='Thecla'>Thecla</option>
<option value='Sixtus'>Sixtus</option>
<option value='Marthar'>Marthar</option>
<option value='Alma' >Alma</option>
<option value='Manuel'>Manuel</option>
<option value='Dum'>Dum</option>
<option value='Gech'>Gech</option>
<option value='Alba'>Hika</option>
<option value='Win'>Win</option>
<option value='Rex'>Rex</option>
<option value='Hika'>Hika</option>
</select>
</div>

Try this
<script type="text/javascript">
$(document).ready(function() {
$('select').change(function () {
$('.business').toggleClass('hide');
});
});
</script>
<style type="text/css">
.accounttype {
border: 1px solid;
margin: 5px;
padding: 10px;
}
.business {
border: 1px solid;
margin: 5px;
padding: 10px;
}
.hide {
display: none;
}
</style>
<div class="accounttype">
Show business model :
<select>
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
</div>
<div class="business hide">
Some content goes here
</div>

Try this code.
$('#accounttype').on('change', function() {
var i = this.value;
if(i=="0")
{
$('#businessmodel').hide();
}
else
{
$('#businessmodel').show();
}
}

<select name="type" required="" class='selector' id="accounttype">
<option value='0'>User</option>
<option value='1'>Provider</option>
</select>
<div id="businessmodel" >
<p id="modellevel" >Business model</p>
<select name="model" required="" class='selector' id="model">
<option value='choose' >Choose Business Model</option>
<option value='ALPHA' >ALPHA</option>
<option value='Thecla'>Thecla</option>
<option value='Sixtus'>Sixtus</option>
<option value='Marthar'>Marthar</option>
<option value='Alma' >Alma</option>
<option value='Manuel'>Manuel</option>
<option value='Dum'>Dum</option>
<option value='Gech'>Gech</option>
<option value='Alba'>Hika</option>
<option value='Win'>Win</option>
<option value='Rex'>Rex</option>
<option value='Hika'>Hika</option>
</select>
</div>
$('#accounttype').on('change', function(event) {
var i= $('#accounttype').val();
if(i=="0")
{
$('#businessmodel').hide();
}
else
{
$('#businessmodel').show();
}
});

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>

select option required on submit using javascript

I don't have the access to html code, I can only edit JS files. When "required" attribute to the <select> is added it works, but how can I make it using JavaScript?
I have tried this:
document.querySelector('.css-dropdowns').required = true;
didn't work
Please take a look
jsfiddle

querySelector will only select the first matching element from DOM.
Use querySelectorAll to get all the matching elements and loop over the collection and add the required attribute.
var allEls = document.querySelectorAll('.css-dropdowns');
for (var i = 0; i < allEls.length; i++) {
allEls[i].required = 'required';
}
Fiddle
var allEls = document.querySelectorAll('.css-dropdowns');
for (var i = 0; i < allEls.length; i++) {
allEls[i].required = 'required';
}
<div class="search-form search_inventory_box row styled_input">
<form method="get" action="#">
<input type='hidden' name='page_id' value=''>
<div class="col-md-6 clearfix">
<div class="my-dropdown make-dropdown make-dropdown">
<select name='make' class='css-dropdowns' data-sort='make' data-prefix='' data-label-singular='Make' data-label-plural='Makes' data-no-options='No options'>
<option value=''>Make</option>
<option value='Nissan' data-key='nissan'>Nissan</option>
<option value='Porsche' data-key='porsche'>Porsche</option>
</select>
</div>
<div class="my-dropdown model-dropdown make-dropdown">
<select name='model' class='css-dropdowns' data-sort='model' data-prefix='' data-label-singular='Model' data-label-plural='Models' data-no-options='No options'>
<option value=''>Model</option>
<option value='Boxster' data-key='boxster'>Boxster</option>
<option value='Carrera' data-key='carrera'>Carrera</option>
<option value='Cayenne' data-key='cayenne'>Cayenne</option>
<option value='GTR' data-key='gtr'>GTR</option>
<option value='GTS' data-key='gts'>GTS</option>
</select>
</div>
<div class="my-dropdown transmission-dropdown make-dropdown">
<select name='transmission' class='css-dropdowns' data-sort='transmission' data-prefix='' data-label-singular='Transmission' data-label-plural='Transmissions' data-no-options='No options'>
<option value=''>Transmission</option>
<option value='5-Speed Automatic' data-key='5-speed-automatic'>5-Speed Automatic</option>
<option value='5-Speed Manual' data-key='5-speed-manual'>5-Speed Manual</option>
<option value='6-Speed Automatic' data-key='6-speed-automatic'>6-Speed Automatic</option>
<option value='6-Speed Manual' data-key='6-speed-manual'>6-Speed Manual</option>
<option value='6-Speed Manual|6-Speed Manual' data-key='6-speed-manual-6-speed-manual'>6-Speed Manual|6-Speed Manual</option>
<option value='6-Speed Semi-Auto' data-key='6-speed-semi-auto'>6-Speed Semi-Auto</option>
<option value='8-Speed Automatic' data-key='8-speed-automatic'>8-Speed Automatic</option>
</select>
</div>
<div class='clearfix'></div>
</div>
<div class="col-md-6 clearfix">
<div class="my-dropdown condition-dropdown make-dropdown">
<select name='condition' class='css-dropdowns' data-sort='condition' data-prefix='' data-label-singular='Condition' data-label-plural='Conditions' data-no-options='No options'>
<option value=''>Condition</option>
<option value='Brand New' data-key='brand-new'>Brand New</option>
<option value='Slightly Used' data-key='slightly-used'>Slightly Used</option>
</select>
</div>
<div class='multiple_dropdowns'>
<div class="my-dropdown make-dropdown">
<select name='yr[]' class='css-dropdowns' data-sort='year' data-prefix='' data-label-singular='Year' data-label-plural='Years' data-no-options='No options'>
<option value=''>Min Year</option>
<option value='2009' data-key='2009'>2009</option>
<option value='2010' data-key='2010'>2010</option>
<option value='2013' data-key='2013'>2013</option>
<option value='2014' data-key='2014'>2014</option>
<option value='2014|2014' data-key='2014-2014'>2014|2014</option>
<option value='2015' data-key='2015'>2015</option>
<option value='Horsepower' data-key='horsepower'>Horsepower</option>
</select>
</div><span class="my-dropdown-between">to</span>
<div class="my-dropdown make-dropdown">
<select name='yr[]' class='css-dropdowns' data-sort='year' data-prefix='' data-label-singular='Year' data-label-plural='Years' data-no-options='No options'>
<option value=''>Max Year</option>
<option value='2009' data-key='2009'>2009</option>
<option value='2010' data-key='2010'>2010</option>
<option value='2013' data-key='2013'>2013</option>
<option value='2014' data-key='2014'>2014</option>
<option value='2014|2014' data-key='2014-2014'>2014|2014</option>
<option value='2015' data-key='2015'>2015</option>
<option value='Horsepower' data-key='horsepower'>Horsepower</option>
</select>
</div>
</div>
<input class='full-width' type='search' name='keywords' value='' placeholder='Refine with keywords'>
<div class='clearfix'></div>
</div>
<div class="col-md-12 clearfix search_categories">
<div class='clearfix'></div>
</div>
<div class="form-element pull-right margin-right-10 col-md-12">
<input type="submit" value="GIVE ME A GOOD PRICE" class="find_new_vehicle pull-right">
<div class="loading_results pull-right"><i class="fa fa-circle-o-notch fa-spin"></i>
</div>
</div>
</form>
</div>
If jQuery is loaded on page, use
$('.css-dropdowns').attr('required', 'required');
Updated Fiddle

You should add the required attribute to the .css-dropdowns when the script is loaded (not inside the form submit function).
document.querySelector('.css-dropdowns').required = true;
$('.search_inventory_box form').submit(function(e) {
//...
});

Here is my long answer
$('.search_inventory_box form').submit(function(e) {
if ( document.getElementsByName('make')[0].value == '' ){
alert('Select make!');
return false;
}
else if ( document.getElementsByName('condition')[0].value == '' ){
alert('Select condition!');
return false;
}
else if ( document.getElementsByName('model')[0].value == '' ){
alert('Select model!');
return false;
}
else if ( document.getElementsByName('transmission')[0].value == '' ){
alert('Select transmission!');
return false;
}
else if ( document.getElementsByName('yr[]')[0].value == '' ){
alert('Select min year!');
return false;
}
else if ( document.getElementsByName('yr[]')[1].value == '' ){
alert('Select max year!');
return false;
}
console.log('fwef');
$('.search_inventory_box form select[value=""]').attr('name', '');
$(this).find("select option:selected").each( function(index, element){
$(this).val($(this).data('key'));
});
});

Select list auto update on any kind of change?

I have a jQuery that when you click on a select option it will show the next one, but you have to click, you cant just use the down arrow or "tab" to the next option. I am wondering what options do I have to make this work?
Here is my jQuery:
function typefunction()
{
var itemTypes = jQuery('#type');
var select = this.value;
itemTypes.change(function () {
if ($(this).val() == '1-Hand') {
$('.1-Hand').show();
$('.2-Hand').hide();
$('.off').hide();
$('.Armor').hide();
}
else $('.1-Hand').hide();
if ($(this).val() == '2-Hand') {
$('.2-Hand').show();
$('.1-Hand').hide();
$('.off').hide();
$('.Armor').hide();
}
else $('.2-Hand').hide();
if ($(this).val() == 'Armor') {
$('.Armor').show();
$('.2-Hand').hide();
$('.off').hide();
$('.1-Hand').hide();
}
else $('.Armor').hide();
if ($(this).val() == 'Off-Hand') {
$('.Off').show();
$('.2-Hand').hide();
$('.1-Hand').hide();
$('.Armor').hide();
}
else $('.Off').hide();
if ($(this).val() == '1-Hand') {
$('.one-hand-dps').show();
$('.item-armor').hide();
$('.two-hand-dps').hide();
}
else $('.one-hand-dps').hide();
if ($(this).val() == '2-Hand') {
$('.two-hand-dps').show();
$('.one-hand-dps').hide();
$('.item-armor').hide();
}
else $('.two-hand-dps').hide();
if ($(this).val() == 'Armor') {
$('.item-armor').show();
$('.one-hand-dps').hide();
$('.two-hand-dps').hide();
}
else $('.item-armor').hide();
});
}
And the HTML:
<div class="input-group item">
<span class="input-group-addon">Type</span>
<select id="type" name="type" class="form-control" onclick="typefunction(); itemstats(); Armor(); OffHand(); TwoHand();">
<option value="Any Type">Any Type</option>
<option value="1-Hand">1-Hand</option>
<option value="2-Hand">2-Hand</option>
<option value="Armor">Armor</option>
<option value="Off-Hand">Off-Hand</option>
</select>
</div>
<div class="input-group item">
<span class="1-Hand input-group-addon" style="display: none;">Sub-Type</span>
<select class="1-Hand form-control" name="sub[1]" style="display: none;">
<option value="All 1-Hand Item Types">All 1-Hand Item Types</option>
<option>Axe</option>
<option>Ceremonial Knife</option>
<option>Hand Crossbow</option>
<option>Dagger</option>
<option>Fist Weapon</option>
<option>Mace</option>
<option>Mighty Weapon</option>
<option>Spear</option>
<option>Sword</option>
<option>Wand</option>
</select>
</div>
<div class="input-group">
<span class="2-Hand input-group-addon" style="display: none; ">Sub-Type</span>
<select class="2-Hand form-control" name="sub[2]" style="display: none;">
<option>All 2-Hand Item Types</option>
<option>Two-Handed Axe</option>
<option>Bow</option>
<option>Diabo</option>
<option>Crossbow</option>
<option>Two-Handed Mace</option>
<option>Two-Handed Mighty Weapon</option>
<option>Polearm</option>
<option>Staff</option>
<option>Two-Handed Sword</option>
</select>
</div>
<div class="input-group">
<span class="Armor input-group-addon" style="display: none;">Sub-Type</span>
<select class="Armor form-control" name="sub[3]" style="display:none;">
<option>All Armor Item Types</option>
<option>Amulet</option>
<option>Belt</option>
<option>Boots</option>
<option>Bracers</option>
<option>Chest Armor</option>
<option>Cloak</option>
<option>Gloves</option>
<option>Helm</option>
<option>Pants</option>
<option>Mighty Belt</option>
<option>Ring</option>
<option>Shoulders</option>
<option>Spirit Stone</option>
<option>Voodoo Mask</option>
<option>Wizard Hat</option>
</select>
</div>
<div class="input-group">
<span class="Off input-group-addon" style="display: none;">Sub-Type</span>
<select class="Off form-control" name="sub[4]" style="display:none;">
<option>All Off-Hand Item Types</option>
<option>Mojo</option>
<option>Source</option>
<option>Quiver</option>
<option>Shield</option>
</select>
</div>

If you use onclick attribute in the select, then it stands to a reason that it requires a mouse click in order to work. Try using onchange for instance and keyboard usage should also work.
<select id="type" name="type" class="form-control" onchange="typefunction(); itemstats(); Armor(); OffHand(); TwoHand();">
<option value="Any Type">Any Type</option>
<option value="1-Hand">1-Hand</option>
<option value="2-Hand">2-Hand</option>
<option value="Armor">Armor</option>
<option value="Off-Hand">Off-Hand</option>
</select>
Also see this question, for more details about how to handle both clicks and keys immediately.

Develop Reference

JavaScript is the programming language of the Web.

How to make dependent dropdown menu show in html/jquery - javascript

Did you enclose it in $(document).ready(function() { // your code });

Add this in your head: <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

Related

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

Show hidden div element based on option selected in select option element

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

select option required on submit using javascript

Select list auto update on any kind of change?

Categories

Resources