How to make dependent dropdown menu show in html/jquery

Question

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

waka-waka-waka · Accepted Answer · 2013-10-19 04:16:40Z

1

Did you enclose it in

$(document).ready(function() {
 // your code
});

answered Oct 19, 2013 at 4:16

waka-waka-waka

1,0554 gold badges14 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gary Hayes · Accepted Answer · 2013-10-19 04:18:07Z

1

Add this in your head:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

answered Oct 19, 2013 at 4:18

Gary Hayes

1,7881 gold badge15 silver badges23 bronze badges

4 Comments

Gary Hayes Over a year ago

Looking at your code further, I see you're using an onchange event listener. It is best to put those at the end of the page, not in the <head>. Move it between the </body> and </html> tags.

Chris Over a year ago

If you mean the script where "Privileges.change(function () {" is present, I moved it from the head to between /body & /html and nothing changed. Thanks for sticking with me and trying to help!

Gary Hayes Over a year ago

Heh... yeah, I see you moved it but you didn't move the <script> tags along with it. It is no longer wrapped in those tags!

Chris Over a year ago

Haha, wow...I have no idea what was going through my mind when I did that, but no change when <script></script was added around it

Collectives™ on Stack Overflow

How to make dependent dropdown menu show in html/jquery

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related