Question

我有一个标准的选择框，它是从数据库查询填充的

                    <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>

然后我有第二个选择框，我想根据上面的选择填充

因此，如果用户选择年薪，我希望选择框2以具有这些选项

                        <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>

如果用户选择小时费率，我希望第二个选择框具有以下选项

                        <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>

最后如果用户选择每日费率，我希望第二个选择框包含以下

                        <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>

但我不确定如何最好地接近这个？有人可以帮助我吗

由于

Answer 1

我总共会创建4个选择框，并隐藏最后一个3.然后当用户从第一个框中选择一个选项时，有选择地显示它们。使用jQuery，它看起来像：

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

假设您使用'年度'，'每小时'和'每日'的ID设置了这三个下拉菜单：

<select id="annual"> ... </select>
<select id="hourly"> ... </select>
<select id="daily"> ... </select>

Answer 2

你可以这样做。复制我的代码并在phpfiddle.net上尝试一个工作示例。

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

根据第一个选择框值填充第二个选择框

2 个答案: