javascript - How do I make new drop down boxes appear when another one has been filled in first? -
i'm building graphic representation of custom candle being made.
right now, idea customer selects scents drop down box, in order. when fill in 1 drop down box, next 1 appears, five. trouble haven't been able figure out way efficiently.
<div class="mainbody"> <div> <span class="subtitle">build candles</span> </div> <div class="candle"> <div class="candle_top"> </div> <div class="candle_fifth"> fifth </div> <div class="candle_fourth"> fourth </div> <div class="candle_third"> third </div> <div class="candle_second"> second </div> <div class="candle_first"> first </div> <div class="candle_bottom"> </div> </div> <div class="design"> <?php $db_server="localhost"; $db_username="root"; $db_pword=""; $db_database="candles"; mysql_connect($db_server, $db_username, $db_pword); if (strlen(mysql_error())>0) {$psubmit=5; $sql['error']=mysql_error(); $db_server="* invalid * "; } else mysql_select_db($db_database); ?> <form method="get"> first: <select name="first"> <option></option> <?php $query = mysql_query("select * products"); while($row = mysql_fetch_array($query)){ echo '<option>'.$row[1].'</option>'; } ?> </select><br /> second: <select name="second"> <option></option> <?php $query = mysql_query("select * products"); while($row = mysql_fetch_array($query)){ echo '<option>'.$row[1].'</option>'; } ?> </select><br /> third: <select name="third"> <option></option> <?php $query = mysql_query("select * products"); while($row = mysql_fetch_array($query)){ echo '<option>'.$row[1].'</option>'; } ?> </select><br /> fourth: <select name="fourth"> <option></option> <?php $query = mysql_query("select * products"); while($row = mysql_fetch_array($query)){ echo '<option>'.$row[1].'</option>'; } ?> </select><br /> fifth: <select name="fifth"> <option></option> <?php $query = mysql_query("select * products"); while($row = mysql_fetch_array($query)){ echo '<option>'.$row[1].'</option>'; } ?> </select><br /> <input type="submit" value="preview" name="submit" /> </form> </div> </div>
i thinking jquery append, don't know how go checking see if first filled. if first , second filled allow third appended.
$('select').change(function(){ if($(this).val()!='') $(this).next('select:first').show(); }
Comments
Post a Comment