Frustrated with jquery code--please help

classic Classic list List threaded Threaded
2 messages Options
Reply | Threaded
Open this post in threaded view
|

Frustrated with jquery code--please help

shelinski
I'm trying to make a simple option box that, when a value is selected, will show a second option box.  It's not working. Here's my code:

<script type="text/javascript"> $(document).ready(function() { $("#category1").change(function(){ if ($(this).find("option:selected").val() =="appeal"){ $("#appealoptionbox").show(); } }); }); </script>


<select id="category1"/>
<option value="Select" name="Select">Select</option>
<option value="appeal" name="appeal">Appeal</option>
 <option value="Civil" name="civil">Civil</option> 
  <option value="Constitutional" name="constitutional">Constitutional</option>
        <option value="Criminal" name="criminal"/>
  <option value="Domestic" name="domestic"/>
 <option value="Real Estate" name="realestate"/> 
 </select>


<div id="appealoptionbox" style="visibility:hidden">

<select name="category2">
<option value="Administrative">Administrative</option>
<option value="Civil">Civil</option>
<option value="Criminal">Criminal</option>
</select>

</div> 

Any help appreciated.
Reply | Threaded
Open this post in threaded view
|

Re: Frustrated with jquery code--please help

X-spert
Hi,
Try this:
Good Luck! :)

<html>
        <head>
                <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>                <script type="text/javascript"> $(document).ready(function() { $("#category1").change(function(){ var selection = $("#category1").val(); var appealIsSelected = $("#category1 option:eq(1)").val(); if (selection != appealIsSelected){ $("#appealoptionbox").hide(); } else { $("#appealoptionbox").show(); } }).change(); }); </script>                  <style> .hidden { visibility: hidden; } .show { visibility: visible; } </style>        </head>
        <body>
                <select id="category1"/> 
                        <option value="select" name="Select">Select</option> 
                        <option value="appeal" name="appeal">Appeal</option> 
                        <option value="civil" name="civil">Civil</option> 
                        <option value="constitutional" name="constitutional">Constitutional</option> 
                        <option value="criminal" name="criminal"/> 
                        <option value="domestic" name="domestic"/> 
                        <option value="real Estate" name="realestate"/> 
                </select> 

                <div id="appealoptionbox" > 

                <select name="category2"> 
                        <option value="Administrative">Administrative</option> 
                        <option value="Civil">Civil</option> 
                        <option value="Criminal">Criminal</option> 
                </select> 

                </div>  
        </body>
</html>


shelinski wrote
I'm trying to make a simple option box that, when a value is selected, will show a second option box.  It's not working. Here's my code:

<script type="text/javascript"> $(document).ready(function() { $("#category1").change(function(){ if ($(this).find("option:selected").val() =="appeal"){ $("#appealoptionbox").show(); } }); }); </script>


<select id="category1"/>
<option value="Select" name="Select">Select</option>
<option value="appeal" name="appeal">Appeal</option>
 <option value="Civil" name="civil">Civil</option> 
  <option value="Constitutional" name="constitutional">Constitutional</option>
        <option value="Criminal" name="criminal"/>
  <option value="Domestic" name="domestic"/>
 <option value="Real Estate" name="realestate"/> 
 </select>


<div id="appealoptionbox" style="visibility:hidden">

<select name="category2">
<option value="Administrative">Administrative</option>
<option value="Civil">Civil</option>
<option value="Criminal">Criminal</option>
</select>

</div> 

Any help appreciated.