populating a second select box based on first select box value

Question

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

This is called cascading dropdowns. There should be plenty of resources available on this site or via your favorite search engine. — Jason P, Nov 06 '13 at 18:28
thanks for the advice i will look at the links provided and look up cascading dropdowns :) did see the other thread but as the second select box was being populated from a database table where as mine isnt i thought i'd start a new one. — user2886669, Nov 06 '13 at 18:40
see this post for an alternative method: http://stackoverflow.com/a/16708479/623952 — gloomy.penguin, Nov 06 '13 at 18:48
thats the sort of thing im after @gloomy.penguin but how would i set the options value and text as i would want the value different to the text, ie **value** 10,000 **text** at least £10,000 could this method be modified to allow me to do that? thanks — user2886669, Nov 06 '13 at 19:16
yes, it can be modified, definitely. your initial array of data would just be a little more complex and then you would just go through the jquery/js and change how the options are loaded. `attr("value", first)` is for the value of the option. `.text(first)` is the label of the option. You would need the values in a JSON array first. Then start to modify the code by getting the data loaded right with the `for` loop. Then modify the different `change` functions. — gloomy.penguin, Nov 06 '13 at 19:22
actually, instead of starting with a huge json array, I bet you could just calculate those values and add them in with a for loop that goes from the starting value to the ending value of whatever range is appropriate. — gloomy.penguin, Nov 06 '13 at 19:24
If you don't know any jquery and don't really want to learn, I would suggest using the answer below because you can use what you already have and you will be able to maintain it in the future. But if you want to try to modify the other example, I'm sure SO will help out with any issues you encounter. Don't be scared to learn new things! And be sure to use the `console.log()` to dump any variables for debugging. — gloomy.penguin, Nov 06 '13 at 19:27
You need to bind the second dropdown on the change event of the first one. — sudhansu63, Nov 07 '13 at 02:51

score 0 · Answer 1 · answered Nov 06 '13 at 18:40

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>

nice idea, but unfortunately hiding them is not an option due to the size of my form and dont want the user thinking there are hidden fields all over the place it might put them off filling out the form. thanks — user2886669, Nov 06 '13 at 19:13
If the size is like what you posted, that is the way. If larger, look into AJAX — mplungjan, Nov 06 '13 at 21:11

score 0 · Answer 2 · answered Nov 06 '13 at 18:50

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>';
    };
    ?>

thats a neat way of approaching it, is there a way of doing this without having the form submit each time the first option is changed? thanks — user2886669, Nov 06 '13 at 19:10
You do basically the same thing only use Javascript instead of PHP since PHP is serverside only. I will add a javascript version in a few minutes. — RugerSR9, Nov 06 '13 at 21:06

populating a second select box based on first select box value

2 Answers2