我有一个标准的选择框,它是从数据库查询填充的
<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>
但我不确定如何最好地接近这个?有人可以帮助我吗
由于
答案 0 :(得分:0)
我总共会创建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>
答案 1 :(得分:0)
你可以这样做。复制我的代码并在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>';
};
?>