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.
Related
I just want to hide a button defaultly and when i select any dropdown list the button comes
FIDDLE HERE
$(function() {
$('#cashbill').change(function() {
$('#bill_icon').hide();
$('#bill_icon' + $(this).val()).show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-4" style="margin-bottom: 0px;">
<label class="col-sm-12 control-label p-sm-0">Bill type :</label>
<select class="form-control selectsch_items" name="cashbill" id="cashbill" required>
<option value="">Choose an items</option>
<option value="1">Raw</option>
<option value="2">Spare</option>
<option value="3">Others</option>
</select>
</div>
<div class="form-group cash-billbtn">
<label class="col-sm-12 control-label p-sm-0"></label>
<button type="button" class="bill-btn" id="bill_icon">Bill</button>
</div>
to shown.. i just tried jQuery but its not work for me..
Just hide the button at first , then check if no value select to hide or show ( using value length as below )
$(this).val().length ? $('#bill_icon').show() : $('#bill_icon').hide();
see below snippet
$(function() {
$('#bill_icon').hide();
$('#cashbill').change(function() {
$(this).val().length ? $('#bill_icon').show() : $('#bill_icon').hide();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-4" style="margin-bottom: 0px;">
<label class="col-sm-12 control-label p-sm-0">Bill type :</label>
<select class="form-control selectsch_items" name="cashbill" id="cashbill" required>
<option value="">Choose an items</option>
<option value="1">Raw</option>
<option value="2">Spare</option>
<option value="3">Others</option>
</select>
</div>
<div class="form-group cash-billbtn">
<label class="col-sm-12 control-label p-sm-0"></label>
<button type="button" class="bill-btn" id="bill_icon">Bill</button>
</div>
if you want to check by text value not value use the beow snippet :
$(function() {
$('#bill_icon').hide();
$('#cashbill').change(function() {
var text = $(this).children("option:selected").text();
( text == "Raw" || text == "Spare" )? $('#bill_icon').show() : $('#bill_icon').hide();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-4" style="margin-bottom: 0px;">
<label class="col-sm-12 control-label p-sm-0">Bill type :</label>
<select class="form-control selectsch_items" name="cashbill" id="cashbill" required>
<option value="">Choose an items</option>
<option value="1">Raw</option>
<option value="2">Spare</option>
<option value="3">Others</option>
</select>
</div>
<div class="form-group cash-billbtn">
<label class="col-sm-12 control-label p-sm-0"></label>
<button type="button" class="bill-btn" id="bill_icon">Bill</button>
</div>
This could be done this way in jQuery:
$(function() {
$('#bill_icon').hide();
$('#cashbill').change(function() {
if (this.value) $('#bill_icon').show();
else $('#bill_icon').hide();
});
});
But this has some problems:
- If your page delays to load, it will show the button, and then it will hide it (flashing items)
- This depends on JS been enabled
What I suggest you, is to hide the button on css, and then control its visibility.
What I do when I want this kind of behavior:
<label>Bill type :</label>
<select name="cashbill" id="cashbill" required>
<option value="">Choose an items</option>
<option value="1">Raw</option>
<option value="2">Spare</option>
<option value="3">Others</option>
</select>
<button type="button">Bill</button>
Hide by default on CSS, and only show it when select has a valid option:
select:invalid + button {
display: none;
}
select:valid + button {
display: inline-block;
}
Another way is using jQuery's toggleClass:
Add hidden class to the button, it will hide the button at first load.
Use toggleClass inside change event of select like this:
$('#cashbill').change(function() {
$('#bill_icon').toggleClass('hidden', $(this).val() === '');
});
Basically you prevent toggling class when selected item is not first item.
Here is working fiddle.
add css above like here.
.bill-btn{
display: none;
}
change your jquery like this.
$(function() {
$('#cashbill').change(function() {
if($(this).val() != "others"){
$('#bill_icon').hide();
$('#bill_icon' + $(this).val()).show();
$(".bill-btn").show(); // added this line here
}
});
});
I want to make input element name="sellprice" enable if i select value sell option else input element will be disabled.
<select id="selling" name="selling">
<option value="">-- Choose --</option>
<option value="free">Open Source</option>
<option value="sell">I Wan't To Sell</option>
</select>
<div class="kd-title-show md-radio-inline">
<label for="4">Price :</label>
<input id="4" type="textbox" class="form-title" name="sellprice" placeholder="Min-$5 to Max-$100 " disabled>
</div>
Here is my Javascript Code, I have try this below code but it's not working.
$(document).ready(function(){
$("select[name='selling']").on('change',function(){
if($(this).val()== "free"){
$("input[name='sellprice']").prop("disabled",false);
}else{
$("input[name='sellprice']").prop("disabled",true);
}
});
});
Please have a look I hope it's useful for you.
$(document).ready(function(){
$("select[name='selling']").on('change',function(){
if($(this).val()== "sell"){
$("input[name='sellprice']").prop("disabled",false);
}else{
$("input[name='sellprice']").prop("disabled",true);
}
});
});
I want to make input element name="sellprice" enable
- that is not an input, it's a dropdown
If i select value sell option else input element will be disabled. - from your current explanation i understand that you want to disable the drop-down if the third option is selected
If the third option is selected, the drop-down will be disabled.
$(document).ready(function() {
$('#mounth').change(function() {
if( $(this).val() == "sell") {
$('#mounth').prop( "disabled", true );
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<select id="mounth" name="selling">
<option value="">-- Choose --</option>
<option value="free">Open Source</option>
<option value="sell">I Don't Want To Sell</option>
</select>
<div class="kd-title-show md-radio-inline">
<label>Price :</label>
<input id="textInput" type="textbox" class="form-title" name="sellprice" placeholder="Min-$5 to Max-$100 " disabled>
</div>
If you want to disable the input if the third option is selected, the following code will do it
$(document).ready(function() {
$('#mounth').change(function() {
if( $(this).val() == "sell") {
$('#textInput').prop( "disabled", true );
} else {
$('#textInput').prop( "disabled", false );
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<select id="mounth" name="selling">
<option value="" selected="selected">-- Choose --</option>
<option value="free">Open Source</option>
<option value="sell">I Don't want To Sell</option>
</select>
<div class="kd-title-show md-radio-inline">
<label>Price :</label>
<input id="textInput" type="textbox" class="form-title" name="sellprice" placeholder="Min-$5 to Max-$100 ">
</div>
<select id="mounth" onchange="myOnChangeFunction()" name="selling">
<option value="">-- Choose --</option>
<option value="free">Open Source</option>
<option value="sell">I Wan't To Sell</option>
</select>
<div class="kd-title-show md-radio-inline">
<label for="4">Price :</label>
<input id="4" type="textbox" class="form-title" name="sellprice" placeholder="Min-$5 to Max-$100 " disabled>
</div>
in js
<script>
function myOnChangeFunction() {
var val = document.getElementById("mounth").value;
if(val === "sell"){
document.getElementById('4').disabled = false;
}else{
document.getElementById('4').disabled = true;
}
}
</script>
I am having a problem to getting last selected option value in multiple select boxes the problem is, I have 4 select boxes you can see in the below image. I want to get the last option value through jquery.
I have tried this code but not getting the last exact value.
$('.option').find('option:selected').attr("name")
This is my form.
<form method="post" id="form-id">
<div class="form-group">
<label>Size</label>
<select class="form-control option" name="size" required>
<option value="">Choose option</option>
<option>8.2 * 11.6 in (A4)</option>
<option>11.7 x 16.5 in (A3)</option>
<option>16.5 x 23.4 in (A2)</option>
<option>23.4 x 33.1 in (A1)</option>
<option>33.1 x 46.8 in (A0)</option>
</select>
</div>
<div class="form-group">
<label>Paper</label>
<select class="form-control option" name="paper" required>
<option value="">Choose option</option>
<option>A4</option>
<option>A3</option>
<option>A2</option>
<option>A1</option>
<option>A0</option>
</select>
</div>
<div class="form-group">
<label>Appearance</label>
<select class="form-control option" name="appearance" required>
<option value="">Choose option</option>
<option>Black & White</option>
<option>Color</option>
<option>Color Division</option>
</select>
</div>
<div class="form-group">
<label>Large Format Binding</label>
<select class="form-control option" name="binding" required>
<option value="">Choose Option</option>
<option>No Binding</option>
<option>Blk Edge w/ Craft Paper (<span class="amount">$3.50</span>)</option>
<option>Blk Edge w/o Craft Paper (<span class="amount">$2.00</span>)</option>
<option>Full Bind and Label (<span class="amount">$4.00</span>)</option>
<option>Post Bind – Drilled Holes w/ Screw Post (<span class="amount">$5.00</span>)</option>
<option>Post Bind w/ Black Edge (<span class="amount">$6.00</span>)</option>
</select>
</div>
<button type="submit" class="btn btn-success cart" style="display:none"><i class="fas fa-shopping-cart"></i> Add to Cart</button>
And this is my script
<script>
$('.option').change(function () {
var check = $(this).val();
var name = $(this).attr("name");
if($('[name=paper]').val() == '' || $('[name=size]').val() == '' || $('[name=appearance]').val() == '' || $('[name=binding]').val() == '')
{
if(name == 'size')
{
if(check == '')
{
$('#size').html('<font color=red> Please select a size </font>');
$('.cart').hide();
}
$('#size').html(check);
}
else if(name == 'paper')
{
if(check == '')
{
$('#paper').html('<font color=red> Please select a paper </font>');
$('.cart').hide();
}
$('#paper').html(check);
}
else if(name == 'appearance')
{
if(check == '')
{
$('#appearance').html('<font color=red> Please select appearance </font>');
$('.cart').hide();
}
$('#appearance').html(check);
}
else if(name == 'binding')
{
if(check == '')
{
$('#binding').html('<font color=red> Please select a binding </font>');
$('.cart').hide();
}
$('#binding').html(check);
}
}
else
{
console.log($('.option').val());
$('.cart').show();
return false;
}
});
</script>
I want to get the last option value through jquery.
So that is the last user selection, not the last <select> having a selection made...
(Answer edited based on comments).
So I assume you simply want $(this).val() to be console logged.
I modified the submit button show/hide... But I didn't get where you wished to display some additionnal hints... So I skipped that.
I think that is a good starter... Have fun coding!
$('.option').on('change',function () {
$('.option').each(function(){ // To show the submit button ONLY if all 4 dropdowns hold not empty value.
$('.cart').show();
if($(this).val() == ""){
$('.cart').hide();
}
});
var this_change = $(this).val();
if(this_change == ""){
this_change = 'User selected the default "Choose option"';
}
console.log(this_change);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" id="form-id">
<div class="form-group">
<label>Size</label>
<select class="form-control option" name="size" required>
<option value="">Choose option</option>
<option>8.2 * 11.6 in (A4)</option>
<option>11.7 x 16.5 in (A3)</option>
<option>16.5 x 23.4 in (A2)</option>
<option>23.4 x 33.1 in (A1)</option>
<option>33.1 x 46.8 in (A0)</option>
</select>
</div>
<div class="form-group">
<label>Paper</label>
<select class="form-control option" name="paper" required>
<option value="">Choose option</option>
<option>A4</option>
<option>A3</option>
<option>A2</option>
<option>A1</option>
<option>A0</option>
</select>
</div>
<div class="form-group">
<label>Appearance</label>
<select class="form-control option" name="appearance" required>
<option value="">Choose option</option>
<option>Black & White</option>
<option>Color</option>
<option>Color Division</option>
</select>
</div>
<div class="form-group">
<label>Large Format Binding</label>
<select class="form-control option" name="binding" required>
<option value="">Choose Option</option>
<option>No Binding</option>
<option>Blk Edge w/ Craft Paper (<span class="amount">$3.50</span>)</option>
<option>Blk Edge w/o Craft Paper (<span class="amount">$2.00</span>)</option>
<option>Full Bind and Label (<span class="amount">$4.00</span>)</option>
<option>Post Bind – Drilled Holes w/ Screw Post (<span class="amount">$5.00</span>)</option>
<option>Post Bind w/ Black Edge (<span class="amount">$6.00</span>)</option>
</select>
</div>
<button type="submit" class="btn btn-success cart" style="display:none"><i class="fas fa-shopping-cart"></i> Add to Cart</button>
You're not getting the value of select tag, use .val() to get the current value selected
Instead of this
$('.option').find('option:selected').attr("name")
Change it to this
$('.option').val()
Hi actually i want to show a new dropdown according to the values in the first dropdown. Here i can show the dropdowns on select but i couldn't hide the other dropdowns, if we select some other options. So, If we select the "buyer-contact-details", we should show the lst1 dropdown. If we select "supplier-contact-details", the lst1 dropdown hide and lst2 should shown. Please Help me.
$(document).ready(function() {
$(".deny-lst").on("change", function() {
if ($(this).val() == "buyer-contact-details") {
$(".lst1").slideDown();
} else if ($(this).val() == "supplier-contact-details") {
$(".lst2").slideDown();
} else if ($(this).val() == "other-to-deny") {
$(".lst3").slideDown();
} else {
$(".lst1, .lst2, lst3").slideUp();
}
});
$(".lst3").on("change", function() {
if ($(this).val() == "other") {
$(".textarea").slideDown();
} else {
$(".textarea").slideUp();
}
});
})
.textarea {
display: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<select class="form-control input-md deny-lst">
<option> Please Select </option>
<option value="buyer-contact-details">Buyer shared their contact details</option>
<option value="supplier-contact-details">Supplier shared their contact details</option>
<option value="other-to-deny">Other Reason</option>
</select>
<select class="form-control input-md lst1" style="display:none;">
<option> Please Select </option>
<option>Option1</option>
<option>Option2</option>
</select>
<select class="form-control input-md lst2" style="display:none;">
<option> Please Select </option>
<option>Option1</option>
<option>Option2</option>
</select>
<select class="form-control input-md lst3" style="display:none;">
<option> Please Select </option>
<option>Option1</option>
<option>Option2</option>
<option value="other">Other</option>
</select>
<div class="textarea">
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
</div>
</div>
You are showing the dropdowns which are necessary to be shown but you are not hiding the ones which are not required. See the first line under change handler.
http://jsfiddle.net/dnr1bocv/
$(document).ready(function() {
$(".deny-lst").on("change", function() {
$(".lst1, .lst2, lst3").slideUp();
if ($(this).val() == "buyer-contact-details") {
$(".lst1").slideDown();
} else if ($(this).val() == "supplier-contact-details") {
$(".lst2").slideDown();
} else if ($(this).val() == "other-to-deny") {
$(".lst3").slideDown();
} else {
$(".lst1, .lst2, lst3").slideUp();
}
});
$(".lst3").on("change", function() {
if ($(this).val() == "other") {
$(".textarea").slideDown();
} else {
$(".textarea").slideUp();
}
});
})
This is probably how I'd do it. I'd attach a class to the subdropdowns and subparts and slide them up when the main dropdown is changed.
$(document).ready(function() {
$(".deny-lst").on("change", function() {
$(".subdrop").slideUp();
if ($(this).val() == "buyer-contact-details") {
$(".lst1").slideDown();
} else if ($(this).val() == "supplier-contact-details") {
$(".lst2").slideDown();
} else if ($(this).val() == "other-to-deny") {
$(".lst3").slideDown();
} else {
$(".lst1, .lst2, lst3").slideUp();
}
});
$(".lst3").on("change", function() {
if ($(this).val() == "other") {
$(".textarea").slideDown();
} else {
$(".textarea").slideUp();
}
});
})
.textarea {
display: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<select class="form-control input-md deny-lst">
<option> Please Select </option>
<option value="buyer-contact-details">Buyer shared their contact details</option>
<option value="supplier-contact-details">Supplier shared their contact details</option>
<option value="other-to-deny">Other Reason</option>
</select>
<select class="form-control input-md subdrop lst1" style="display:none;">
<option> Please Select </option>
<option>Option1</option>
<option>Option2</option>
</select>
<select class="form-control input-md subdrop lst2" style="display:none;">
<option> Please Select </option>
<option>Option1</option>
<option>Option2</option>
</select>
<select class="form-control input-md subdrop lst3" style="display:none;">
<option> Please Select </option>
<option>Option1</option>
<option>Option2</option>
<option value="other">Other</option>
</select>
<div class="textarea subdrop">
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
</div>
</div>
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>