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'));
});
});
Related
When I select an option from semester than it should open subjects from that semester and not anywhere else 2 different option box for semester and subjects
<select class="form-select" id="sem" onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);" required>
<option selected>Choose...</option>
<option value="Sem1">Sem1</option>
<option value="Sem2">Sem2</option>
<option value="Sem3">Sem3</option>
<option value="Sem4">Sem4</option>
<option value="Sem5">Sem5</option>
<option value="Sem6">Sem6</option>
<option value="Sem7">Sem7</option>
<option value="Sem8">Sem8</option>
</select>
<label for="inputGroupSelect01">Semester</label>
</div>
</div>
<div class="col-md">
<div class="form-floating">
<select class="form-select" id="Sub1" required>
<option selected>Choose...</option>
<option value="sub1">Applied Maths-1</option>
<option value="sub2">Applied Physics-1</option>
<option value="sub3">Applied Physics-2</option>
</select>
<label for="inputGroupSelect01">Subject Name</label>
I don't know if i understand you perfectly, but do you want something like this?
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
</head>
<body>
<select class="form-select" id="sem" onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);" required>
<option selected>Choose...</option>
<option value="Sem1">Sem1</option>
<option value="Sem2">Sem2</option>
<option value="Sem3">Sem3</option>
</select>
<label for="inputGroupSelect01">Semester</label>
</div>
</div>
<div class="col-md">
<div class="form-floating">
<select id="genDropdown" class="form-select" id="Sub1" required>
<option selected>Choose a sem...</option>
</select>
<label for="inputGroupSelect01">Subject Name</label>
<script>
function doHTML(list){
let string ="";
let index = 0;
list.forEach(element => {
string += `<option value="sub${index}">${element}</option>`;
});
return string;
}
function dynamicdropdown(sem){
let subjects1 = ["Applied Maths-1", "Applied Physics-1"];
let subjects2 = ["Applied Maths-2", "Applied Physics-2"];
let subjects3 = ["Applied Maths-3", "Applied Physics-3"];
let genDropdown = document.getElementById("genDropdown");
if(sem=="Sem1"){
genDropdown.innerHTML = doHTML(subjects1);
}
if(sem=="Sem2"){
genDropdown.innerHTML = doHTML(subjects2);
}
if(sem=="Sem3"){
genDropdown.innerHTML = doHTML(subjects3);
}
}
</script>
</body>
</html>
Hope that could help you!
you need to use javascript to define the dropdown content,
check this snippet about how to clear old options and add new options related to your selection
you can either append the new options as childs to the dropdownlist
function dynamicdropdown(n) {
var arr1 = ["sem1 options","sem1 options","sem1 options","sem1 options","sem1 options"];
var arr2 = ["sem2 options","sem2 options","sem2 options","sem2 options","sem2 options"];
if (n === "Sem1") {
document.getElementById('Sub1').innerHTML = '';
for (var i =0; i< arr1.length; i++) {
document.getElementById('Sub1').innerHTML += "<option>" + arr1[i] + "</option>";
}
} else if (n === "Sem2") {
document.getElementById('Sub1').innerHTML = '';
for (var i =0; i< arr2.length; i++) {
document.getElementById('Sub1').innerHTML += "<option>" + arr2[i] + "</option>";
}
}
}
<select class="form-select" id="sem" onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);" required>
<option selected>Choose...</option>
<option value="Sem1">Sem1</option>
<option value="Sem2">Sem2</option>
<option value="Sem3">Sem3</option>
<option value="Sem4">Sem4</option>
<option value="Sem5">Sem5</option>
<option value="Sem6">Sem6</option>
<option value="Sem7">Sem7</option>
<option value="Sem8">Sem8</option>
</select>
<label for="inputGroupSelect01">Semester</label>
</div>
</div>
<div class="col-md">
<div class="form-floating">
<select class="form-select" id="Sub1" required>
<option selected>Choose...</option>
<option value="sub1">Applied Maths-1</option>
<option value="sub2">Applied Physics-1</option>
<option value="sub3">Applied Physics-2</option>
</select>
<label for="inputGroupSelect01">Subject Name</label>
I am a newbie and I have this project where the user should have the option of custom input if the listed options are not in dropdown.
HTML
<div class="form-group">
<label class="col-sm-2 col-form-label">Select Page Size</label>
<select name = 'pageSelector' class="col-sm-3">
<option value ="">Select Page Size</option>
<option value ="84.1|118.9">A0</option>
<option value = "59.4|84.1">A1</option>
<option value = "7.4|10.5">A7</option>
<option value = "custom">Select Custom</option>
</select>
</div>
PHP
if(isset($_POST["pageSelector"]))
{
$result = $_POST['pageSelector'];
if($result == "")
{
echo "<script>alert('Please select the Page')</script>";
}
$result_explode = explode('|', $result);
$width_page = $result_explode[0];
$height_page = $result_explode[1];
// Converting the string variables to integer
$width_plate=(double)$width_plate;
$height_plate=(double)$height_plate;
$width_page=(double)$width_page;
$height_page=(double)$height_page;
// To calculate the number of pages that can be print with one selected plate
$calculated_width = $width_plate/$width_page;
$calculated_height = $height_plate/$height_page;
$print_include = (int)$calculated_height*(int)$calculated_width;
echo "<div class='h1'>Number of Prints in one plate ".$print_include." prints</div> ";
}
I would like if the user selects the custom option then a input text should appear on the screen.
If user selected a custom option then you can give him an input.
let selectEl = document.getElementById('select-list');
selectEl.addEventListener('change', (e) => {
if (e.target.value == 'custom') {
document.getElementById('txt-custom').style.display = 'block';
} else {
document.getElementById('txt-custom').style.display = 'none';
}
});
#txt-custom {
display: none;
}
<select id="select-list">
<option value="">Select an option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="custom">Custom</option>
</select>
<input type="text" id="txt-custom" name="custom-value" />
var pageSelector = document.getElementById('pageSelector');
var customInput = document.getElementById('customInput');
pageSelector.addEventListener('change', function(){
if(this.value == "custom") {
customInput.classList.remove('hide');
} else {
customInput.classList.add('hide');
}
})
.hide {
width: 0;
height: 0;
opacity: 0;
}
<div class="form-group">
<label class="col-sm-2 col-form-label">Select Page Size</label>
<select name = 'pageSelector' class="col-sm-3 page" id="pageSelector">
<option value ="">Select Page Size</option>
<option value ="84.1|118.9">A0</option>
<option value = "59.4|84.1">A1</option>
<option value = "7.4|10.5">A7</option>
<option value = "custom">Select Custom</option>
</select>
<input type="text" class="hide" placeholder="Custom Selector" name="custom" id="customInput">
</div>
Demo Code :
First you should have input with style="display:none" and with jQuery
jQuery(document).ready(function() {
jQuery("#selectId").change(function() {
if (jQuery(this).val() === 'custom'){
jQuery('input[name=other_input]').show();
} else {
jQuery('input[name=other_input]').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<select name = 'pageSelector' class="col-sm-3" id="selectId" >
<option value ="">Select Page Size</option>
<option value ="84.1|118.9">A0</option>
<option value = "59.4|84.1">A1</option>
<option value = "7.4|10.5">A7</option>
<option value = "custom">Select Custom</option>
</select>
<br><br><br>
<input type="text" name="other_input" style="display:none" />
Angular Version
Angular CLI: 13.0.3
Node: 16.15.0
Package Manager: npm 8.5.5
In .html File
**<div class="col-md-6">
<label class="form-label">Attendence Type</label>
<select (change)="type($event)" class="form-select" aria-label="Default select example" >
<option selected value="P">Present</option>
<option value="A">Absent</option>
<option value="PL">Paid Leave</option>
<option value="UL">Unpaid Leave</option>
</select>
</div>**
I want to Show this input after select paid leave
**<div *ngIf="plFlag" class="col-md-6">
<label class="form-label">Leave Type</label>
<select class="form-select" aria-label="Default select example">
<option selected disabled>Leave Type</option>
<option value="CL">Causel Leave</option>
<option value="SL">Seek Leave</option>
</select>
</div>**
and in .ts File
**type(event: any) {
console.log(event.target.value);
if (event.target.value == "PL") {
this.plFlag = true;
}
else {
this.plFlag = false;
}
}**
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>
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.
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>