This question already has an answer here:
I have a standard select box which is populated from a database query
<select id="filter-salary" name="s" title="Salary"class="chosen-select" style="width:170px;">
<option value="Annual Salary">Annual Salary</option>
<option value="Hourly Rate">Hourly Rate</option>
<option value="Daily Rate">Daily Rate</option>
</select>
i then have a second select box which i want to populate depending on the choice from the above
so if the user selects Annual Salary i want select box 2 to have these options
<option value="">Any</option>
<option value="10,000">at least £10,000</option>
<option value="15,000">at least £15,000</option>
<option value="20,000">at least £20,000</option>
<option value="25,000">at least £25,000</option>
<option value="30,000">at least £30,000</option>
<option value="35,000">at least £35,000</option>
<option value="40,000">at least £40,000</option>
<option value="45,000">at least £45,000</option>
<option value="50,000">at least £50,000</option>
if the user selects hourly rate i want the second select box to have the following options
<option value="">Any</option>
<option value="5">at least £5</option>
<option value="6">at least £6</option>
<option value="7">at least £7</option>
<option value="8">at least £8</option>
<option value="9">at least £9</option>
<option value="10">at least £10</option>
<option value="11">at least £11</option>
<option value="12">at least £12</option>
<option value="13">at least £13</option>
<option value="14">at least £14</option>
<option value="15">at least £15</option>
<option value="16">at least £16</option>
<option value="17">at least £17</option>
<option value="18">at least £18</option>
<option value="19">at least £19</option>
<option value="20">at least £20</option>
<option value="22">at least £22</option>
<option value="25">at least £25</option>
<option value="28">at least £28</option>
<option value="30">at least £30</option>
<option value="32">at least £32</option>
<option value="35">at least £35</option>
<option value="38">at least £38</option>
<option value="40">at least £40</option>
<option value="45">at least £45</option>
<option value="50">at least £50</option>
and finally if the user selects daily rate i want the second select box to contain the following
<option value="">Any</option>
<option value="40">at least £40</option>
<option value="50">at least £50</option>
<option value="60">at least £60</option>
<option value="70">at least £70</option>
<option value="80">at least £80</option>
<option value="90">at least £90</option>
<option value="100">at least £100</option>
<option value="120">at least £120</option>
<option value="140">at least £140</option>
<option value="160">at least £160</option>
<option value="180">at least £180</option>
<option value="200">at least £200</option>
<option value="220">at least £220</option>
<option value="240">at least £240</option>
<option value="260">at least £260</option>
<option value="280">at least £280</option>
<option value="300">at least £300</option>
<option value="350">at least £350</option>
<option value="400">at least £400</option>
<option value="450">at least £450</option>
<option value="500">at least £500</option>
but im not sure how best to approach this? could someone please help me
Thanks
</div>
I would create 4 select boxes in total, and hide the last 3. Then selectively show them when the user selects an option from the first box. Using jQuery, it would look something like:
$(document).ready(function() {
$('#annual').hide(); // Hide them all initially
$('#hourly').hide();
$('#daily').hide();
$("[name='s']").change(function() {
var sel = $(this).val();
if(sel == 'Annual Salary') {
$('#annual').show();
$('#hourly').hide();
$('#daily').hide();
} else if(sel == 'Hourly Rate') {
$('#annual').hide();
$('#hourly').show();
$('#daily').hide();
} else if(sel == 'Daily Rate') {
$('#annual').hide();
$('#hourly').hide();
$('#daily').show();
}
});
});
Assuming you had these three drop downs setup with ids of 'annual', 'hourly' and 'daily':
<select id="annual"> ... </select>
<select id="hourly"> ... </select>
<select id="daily"> ... </select>
You can do something like this. Copy my code and try it at phpfiddle.net for a working example.
<form>
<select id="filter-salary" name="s" title="Salary"class="chosen-select" style="width:170px;" onchange="this.form.submit()">
<option value="">--Choose One---</option>
<option value="1">Annual Salary</option>
<option value="2">Hourly Rate</option>
<option value="3">Daily Rate</option>
</select>
<noscript><input type="submit" value="Submit"></noscript>
</form>
<?php
if(isset($_GET['s'])){
$s = $_GET['s'];
}else{$s = 0;};
if($s == 0){
echo " ";}
if($s == 1){
echo '<select><option value="">Any</option>
<option value="10,000">at least £10,000</option>
<option value="15,000">at least £15,000</option>
<option value="20,000">at least £20,000</option>
<option value="25,000">at least £25,000</option>
<option value="30,000">at least £30,000</option>
<option value="35,000">at least £35,000</option>
<option value="40,000">at least £40,000</option>
<option value="45,000">at least £45,000</option>
<option value="50,000">at least £50,000</option></select>';
};
if($s == 2){
echo '<select><option value="">Any</option>
<option value="5">at least £5</option>
<option value="6">at least £6</option>
<option value="7">at least £7</option>
<option value="8">at least £8</option>
<option value="9">at least £9</option>
<option value="10">at least £10</option>
<option value="11">at least £11</option>
<option value="12">at least £12</option>
<option value="13">at least £13</option>
<option value="14">at least £14</option>
<option value="15">at least £15</option>
<option value="16">at least £16</option>
<option value="17">at least £17</option>
<option value="18">at least £18</option>
<option value="19">at least £19</option>
<option value="20">at least £20</option>
<option value="22">at least £22</option>
<option value="25">at least £25</option>
<option value="28">at least £28</option>
<option value="30">at least £30</option>
<option value="32">at least £32</option>
<option value="35">at least £35</option>
<option value="38">at least £38</option>
<option value="40">at least £40</option>
<option value="45">at least £45</option>
<option value="50">at least £50</option></select>';
};
if($s == 3){
echo '<select><option value="">Any</option>
<option value="40">at least £40</option>
<option value="50">at least £50</option>
<option value="60">at least £60</option>
<option value="70">at least £70</option>
<option value="80">at least £80</option>
<option value="90">at least £90</option>
<option value="100">at least £100</option>
<option value="120">at least £120</option>
<option value="140">at least £140</option>
<option value="160">at least £160</option>
<option value="180">at least £180</option>
<option value="200">at least £200</option>
<option value="220">at least £220</option>
<option value="240">at least £240</option>
<option value="260">at least £260</option>
<option value="280">at least £280</option>
<option value="300">at least £300</option>
<option value="350">at least £350</option>
<option value="400">at least £400</option>
<option value="450">at least £450</option>
<option value="500">at least £500</option></select>';
};
?>