我想为实现一个重复，我有3个选择，即当select1更改时，它必须更改select2和select3
如果更改了select2，则必须更改select3。
对于select1的某些值，必须将select3隐藏。
一个例子是
选择了“特定日期和时间”（select1）
select2和3应该都隐藏
选择了“分钟计时器”（select1）
select2应该加载“每分钟”，“每5分钟” ...列表
隐藏select3
选择了“小时计时器”（select1）
select2应该加载“每小时”，“每2小时” ...列表
隐藏select3
选择了“白天计时器”（select1）
select2应该加载“午夜至凌晨1点”，“凌晨1点至下午2点” ...列表
隐藏select3
选择了“周定时器”（select1）
select2应该加载“每个星期一”，“每个星期二” ...列表
select3应该加载“午夜至凌晨1点”，“凌晨1点至下午2点” ...列表
选择了“月定时器”（select1）
select2应加载“ 1”，“ 2” ...列表
select3应该加载“午夜至凌晨1点”，“凌晨1点至下午2点” ...列表
我无法按预期执行。
Java脚本
var $select1 = $( '#select1' ),
$select2 = $( '#select2' ),
$select3 = $( '#select3' ),
$options = $select2.find( 'option' );
$select1.on( 'change', function(e) {
$select2.html( $options.filter( '[data-id="' + $(this).find(':selected').data("id") + '"]' ) );
} ).trigger( 'change' );
$select2.on( 'change', function(e) {
$select3.html( $options.filter( '[data-id="' + $(this).find(':selected').data("www") + '"]' ) );
} ).trigger( 'change' ); <select name="select1" id="select1">
<option data-id="s" value="Specific date and time">Specific date and time</option>
<option data-id="mi" value="Minutes timer">Minutes timer</option>
<option data-id="h" value="Hour timer">Hour timer</option>
<option data-id="d" value="Day timer">Day timer</option>
<option data-id="w" value="Week timer">Week timer</option>
<option data-id="mo" value="Month timer">Month timer</option>
</select>
<select name="select2" id="select2">
<option data-id="mi" value="Every minute">Every minute</option>
<option data-id="mi" value="Every 5 minutes">Every 5 minutes</option>
<option data-id="mi" value="Every 10 minutes">Every 10 minutes</option>
<option data-id="mi" value="Every 15 minutes">Every 15 minutes</option>
<option data-id="mi" value="Every 30 minutes">Every 30 minutes</option>
<option data-id="h" value="Every hour">Every hour</option>
<option data-id="h" value="Every 2 hours">Every 2 hours</option>
<option data-id="h" value="Every 4 hours">Every 4 hours</option>
<option data-id="h" value="Every 6 hours">Every 6 hours</option>
<option data-id="h" value="Every 8 hours">Every 8 hours</option>
<option data-id="h" value="Every 12 hours">Every 12 hours</option>
<option data-id="d" value="Midnight to 1am">Midnight to 1am</option>
<option data-id="d" value="1am to 2am">1am to 2am</option>
<option data-id="d" value="2am to 3am">2am to 3am</option>
<option data-id="d" value="3am to 4am">3am to 4am</option>
<option data-id="d" value="4am to 5am">4am to 5am</option>
<option data-id="d" value="5am to 6am">5am to 6am</option>
<option data-id="d" value="6am to 7am">6am to 7am</option>
<option data-id="d" value="7am to 8am">7am to 8am</option>
<option data-id="d" value="8am to 9am">8am to 9am</option>
<option data-id="d" value="9am to 10am">9am to 10am</option>
<option data-id="d" value="10am to 11am">10am to 11am</option>
<option data-id="d" value="11am to noon">11am to noon</option>
<option data-id="d" value="Noon to 1pm">Noon to 1pm</option>
<option data-id="d" value="1pm to 2pm">1pm to 2pm</option>
<option data-id="d" value="2pm to 3pm">2pm to 3pm</option>
<option data-id="d" value="3pm to 4pm">3pm to 4pm</option>
<option data-id="d" value="4pm to 5pm">4pm to 5pm</option>
<option data-id="d" value="5pm to 6pm">5pm to 6pm</option>
<option data-id="d" value="6pm to 7pm">6pm to 7pm</option>
<option data-id="d" value="7pm to 8pm">7pm to 8pm</option>
<option data-id="d" value="8pm to 9pm">8pm to 9pm</option>
<option data-id="d" value="9pm to 10pm">9pm to 10pm</option>
<option data-id="d" value="10pm to 11pm">10pm to 11pm</option>
<option data-id="d" value="11pm to midnight">11pm to midnight</option>
<option data-id="w" value="Every Monday">Every Monday</option>
<option data-id="w" value="Every Tuesday">Every Tuesday</option>
<option data-id="w" value="Every Wednesday">Every Wednesday</option>
<option data-id="w" value="Every Thursday">Every Thursday</option>
<option data-id="w" value="Every Friday">Every Friday</option>
<option data-id="w" value="Every Saturday">Every Saturday</option>
<option data-id="w" value="Every Sunday">Every Sunday</option>
<option data-id="mo" value="1">1</option>
<option data-id="mo" value="2">2</option>
<option data-id="mo" value="3">3</option>
<option data-id="mo" value="4">4</option>
<option data-id="mo" value="5">5</option>
<option data-id="mo" value="6">6</option>
<option data-id="mo" value="7">7</option>
<option data-id="mo" value="8">8</option>
<option data-id="mo" value="9">9</option>
<option data-id="mo" value="10">10</option>
<option data-id="mo" value="11">11</option>
<option data-id="mo" value="12">12</option>
<option data-id="mo" value="13">13</option>
<option data-id="mo" value="14">14</option>
<option data-id="mo" value="15">15</option>
<option data-id="mo" value="16">16</option>
<option data-id="mo" value="17">17</option>
<option data-id="mo" value="18">18</option>
<option data-id="mo" value="19">19</option>
<option data-id="mo" value="20">20</option>
<option data-id="mo" value="21">21</option>
<option data-id="mo" value="22">22</option>
<option data-id="mo" value="23">23</option>
<option data-id="mo" value="24">24</option>
<option data-id="mo" value="25">25</option>
<option data-id="mo" value="26">26</option>
<option data-id="mo" value="27">27</option>
<option data-id="mo" value="28">28</option>
<option data-id="mo" value="29">29</option>
<option data-id="mo" value="30">30</option>
<option data-id="mo" value="31">31</option>
</select>
<select name="select3" id="select3">
<option data-www="w" value="Midnight to 1am">Midnight to 1am</option>
<option data-www="w" value="1am to 2am">1am to 2am</option>
<option data-www="w" value="2am to 3am">2am to 3am</option>
<option data-www="w" value="3am to 4am">3am to 4am</option>
<option data-www="w" value="4am to 5am">4am to 5am</option>
<option data-www="w" value="5am to 6am">5am to 6am</option>
<option data-www="w" value="6am to 7am">6am to 7am</option>
<option data-www="w" value="7am to 8am">7am to 8am</option>
<option data-www="w" value="8am to 9am">8am to 9am</option>
<option data-www="w" value="9am to 10am">9am to 10am</option>
<option data-www="w" value="10am to 11am">10am to 11am</option>
<option data-www="w" value="11am to noon">11am to noon</option>
<option data-www="w" value="Noon to 1pm">Noon to 1pm</option>
<option data-www="w" value="1pm to 2pm">1pm to 2pm</option>
<option data-www="w" value="2pm to 3pm">2pm to 3pm</option>
<option data-www="w" value="3pm to 4pm">3pm to 4pm</option>
<option data-www="w" value="4pm to 5pm">4pm to 5pm</option>
<option data-www="w" value="5pm to 6pm">5pm to 6pm</option>
<option data-www="w" value="6pm to 7pm">6pm to 7pm</option>
<option data-www="w" value="7pm to 8pm">7pm to 8pm</option>
<option data-www="w" value="8pm to 9pm">8pm to 9pm</option>
<option data-www="w" value="9pm to 10pm">9pm to 10pm</option>
<option data-www="w" value="10pm to 11pm">10pm to 11pm</option>
<option data-www="w" value="11pm to midnight">11pm to midnight</option>
<option data-www="mo" value="Midnight to 1am">Midnight to 1am</option>
<option data-www="mo" value="1am to 2am">1am to 2am</option>
<option data-www="mo" value="2am to 3am">2am to 3am</option>
<option data-www="mo" value="3am to 4am">3am to 4am</option>
<option data-www="mo" value="4am to 5am">4am to 5am</option>
<option data-www="mo" value="5am to 6am">5am to 6am</option>
<option data-www="mo" value="6am to 7am">6am to 7am</option>
<option data-www="mo" value="7am to 8am">7am to 8am</option>
<option data-www="mo" value="8am to 9am">8am to 9am</option>
<option data-www="mo" value="9am to 10am">9am to 10am</option>
<option data-www="mo" value="10am to 11am">10am to 11am</option>
<option data-www="mo" value="11am to noon">11am to noon</option>
<option data-www="mo" value="Noon to 1pm">Noon to 1pm</option>
<option data-www="mo" value="1pm to 2pm">1pm to 2pm</option>
<option data-www="mo" value="2pm to 3pm">2pm to 3pm</option>
<option data-www="mo" value="3pm to 4pm">3pm to 4pm</option>
<option data-www="mo" value="4pm to 5pm">4pm to 5pm</option>
<option data-www="mo" value="5pm to 6pm">5pm to 6pm</option>
<option data-www="mo" value="6pm to 7pm">6pm to 7pm</option>
<option data-www="mo" value="7pm to 8pm">7pm to 8pm</option>
<option data-www="mo" value="8pm to 9pm">8pm to 9pm</option>
<option data-www="mo" value="9pm to 10pm">9pm to 10pm</option>
<option data-www="mo" value="10pm to 11pm">10pm to 11pm</option>
<option data-www="mo" value="11pm to midnight">11pm to midnight</option>
</select>最佳答案
我认为您实际需要的只是处理change()的$select1事件，然后隐藏/显示选项，而不是更改每个选择的整个html()。尝试这个：
var $select1 = $('#select1'),
$select2 = $('#select2'),
$select3 = $('#select3');
$select1.on('change', function(e) {
var active = $(this).find(':selected').data('id');
$select2.show().find('option').hide().filter(function() {
return $(this).data('id') == active
}).show().first().prop('selected', true);
if (active == "mo" || active == "w") {
$select3.show().find('option').hide().filter(function() {
return $(this).data('www') == active
}).show().first().prop('selected', true);
} else {
$select3.hide()
}
})#select3,
#select2 {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select1" id="select1">
<option data-id="s" value="Specific date and time">Specific date and time</option>
<option data-id="mi" value="Minutes timer">Minutes timer</option>
<option data-id="h" value="Hour timer">Hour timer</option>
<option data-id="d" value="Day timer">Day timer</option>
<option data-id="w" value="Week timer">Week timer</option>
<option data-id="mo" value="Month timer">Month timer</option>
</select>
<select name="select2" id="select2">
<option data-id="mi" value="Every minute">Every minute</option><option data-id="mi" value="Every 5 minutes">Every 5 minutes</option><option data-id="mi" value="Every 10 minutes">Every 10 minutes</option><option data-id="mi" value="Every 15 minutes">Every 15 minutes</option><option data-id="mi" value="Every 30 minutes">Every 30 minutes</option>
<option data-id="h" value="Every hour">Every hour</option> <option data-id="h" value="Every 2 hours">Every 2 hours</option> <option data-id="h" value="Every 4 hours">Every 4 hours</option> <option data-id="h" value="Every 6 hours">Every 6 hours</option> <option data-id="h" value="Every 8 hours">Every 8 hours</option> <option data-id="h" value="Every 12 hours">Every 12 hours</option>
<option data-id="d" value="Midnight to 1am">Midnight to 1am</option> <option data-id="d" value="1am to 2am">1am to 2am</option> <option data-id="d" value="2am to 3am">2am to 3am</option> <option data-id="d" value="3am to 4am">3am to 4am</option> <option data-id="d" value="4am to 5am">4am to 5am</option> <option data-id="d" value="5am to 6am">5am to 6am</option> <option data-id="d" value="6am to 7am">6am to 7am</option> <option data-id="d" value="7am to 8am">7am to 8am</option> <option data-id="d" value="8am to 9am">8am to 9am</option> <option data-id="d" value="9am to 10am">9am to 10am</option> <option data-id="d" value="10am to 11am">10am to 11am</option> <option data-id="d" value="11am to noon">11am to noon</option> <option data-id="d" value="Noon to 1pm">Noon to 1pm</option> <option data-id="d" value="1pm to 2pm">1pm to 2pm</option> <option data-id="d" value="2pm to 3pm">2pm to 3pm</option> <option data-id="d" value="3pm to 4pm">3pm to 4pm</option> <option data-id="d" value="4pm to 5pm">4pm to 5pm</option> <option data-id="d" value="5pm to 6pm">5pm to 6pm</option> <option data-id="d" value="6pm to 7pm">6pm to 7pm</option> <option data-id="d" value="7pm to 8pm">7pm to 8pm</option> <option data-id="d" value="8pm to 9pm">8pm to 9pm</option> <option data-id="d" value="9pm to 10pm">9pm to 10pm</option> <option data-id="d" value="10pm to 11pm">10pm to 11pm</option> <option data-id="d" value="11pm to midnight">11pm to midnight</option>
<option data-id="w" value="Every Monday">Every Monday</option> <option data-id="w" value="Every Tuesday">Every Tuesday</option> <option data-id="w" value="Every Wednesday">Every Wednesday</option> <option data-id="w" value="Every Thursday">Every Thursday</option> <option data-id="w" value="Every Friday">Every Friday</option> <option data-id="w" value="Every Saturday">Every Saturday</option> <option data-id="w" value="Every Sunday">Every Sunday</option>
<option data-id="mo" value="1">1</option> <option data-id="mo" value="2">2</option> <option data-id="mo" value="3">3</option> <option data-id="mo" value="4">4</option> <option data-id="mo" value="5">5</option> <option data-id="mo" value="6">6</option> <option data-id="mo" value="7">7</option> <option data-id="mo" value="8">8</option> <option data-id="mo" value="9">9</option> <option data-id="mo" value="10">10</option> <option data-id="mo" value="11">11</option> <option data-id="mo" value="12">12</option> <option data-id="mo" value="13">13</option> <option data-id="mo" value="14">14</option> <option data-id="mo" value="15">15</option> <option data-id="mo" value="16">16</option> <option data-id="mo" value="17">17</option> <option data-id="mo" value="18">18</option> <option data-id="mo" value="19">19</option> <option data-id="mo" value="20">20</option> <option data-id="mo" value="21">21</option> <option data-id="mo" value="22">22</option> <option data-id="mo" value="23">23</option> <option data-id="mo" value="24">24</option> <option data-id="mo" value="25">25</option> <option data-id="mo" value="26">26</option> <option data-id="mo" value="27">27</option> <option data-id="mo" value="28">28</option> <option data-id="mo" value="29">29</option> <option data-id="mo" value="30">30</option> <option data-id="mo" value="31">31</option>
</select>
<select name="select3" id="select3">
<option data-www="w" value="Midnight to 1am">Midnight to 1am</option> <option data-www="w" value="1am to 2am">1am to 2am</option> <option data-www="w" value="2am to 3am">2am to 3am</option> <option data-www="w" value="3am to 4am">3am to 4am</option> <option data-www="w" value="4am to 5am">4am to 5am</option> <option data-www="w" value="5am to 6am">5am to 6am</option> <option data-www="w" value="6am to 7am">6am to 7am</option> <option data-www="w" value="7am to 8am">7am to 8am</option> <option data-www="w" value="8am to 9am">8am to 9am</option> <option data-www="w" value="9am to 10am">9am to 10am</option> <option data-www="w" value="10am to 11am">10am to 11am</option> <option data-www="w" value="11am to noon">11am to noon</option> <option data-www="w" value="Noon to 1pm">Noon to 1pm</option> <option data-www="w" value="1pm to 2pm">1pm to 2pm</option> <option data-www="w" value="2pm to 3pm">2pm to 3pm</option> <option data-www="w" value="3pm to 4pm">3pm to 4pm</option> <option data-www="w" value="4pm to 5pm">4pm to 5pm</option> <option data-www="w" value="5pm to 6pm">5pm to 6pm</option> <option data-www="w" value="6pm to 7pm">6pm to 7pm</option> <option data-www="w" value="7pm to 8pm">7pm to 8pm</option> <option data-www="w" value="8pm to 9pm">8pm to 9pm</option> <option data-www="w" value="9pm to 10pm">9pm to 10pm</option> <option data-www="w" value="10pm to 11pm">10pm to 11pm</option> <option data-www="w" value="11pm to midnight">11pm to midnight</option>
<option data-www="mo" value="Midnight to 1am">Midnight to 1am</option> <option data-www="mo" value="1am to 2am">1am to 2am</option> <option data-www="mo" value="2am to 3am">2am to 3am</option> <option data-www="mo" value="3am to 4am">3am to 4am</option> <option data-www="mo" value="4am to 5am">4am to 5am</option> <option data-www="mo" value="5am to 6am">5am to 6am</option> <option data-www="mo" value="6am to 7am">6am to 7am</option> <option data-www="mo" value="7am to 8am">7am to 8am</option> <option data-www="mo" value="8am to 9am">8am to 9am</option> <option data-www="mo" value="9am to 10am">9am to 10am</option> <option data-www="mo" value="10am to 11am">10am to 11am</option> <option data-www="mo" value="11am to noon">11am to noon</option> <option data-www="mo" value="Noon to 1pm">Noon to 1pm</option> <option data-www="mo" value="1pm to 2pm">1pm to 2pm</option> <option data-www="mo" value="2pm to 3pm">2pm to 3pm</option> <option data-www="mo" value="3pm to 4pm">3pm to 4pm</option> <option data-www="mo" value="4pm to 5pm">4pm to 5pm</option> <option data-www="mo" value="5pm to 6pm">5pm to 6pm</option> <option data-www="mo" value="6pm to 7pm">6pm to 7pm</option> <option data-www="mo" value="7pm to 8pm">7pm to 8pm</option> <option data-www="mo" value="8pm to 9pm">8pm to 9pm</option> <option data-www="mo" value="9pm to 10pm">9pm to 10pm</option> <option data-www="mo" value="10pm to 11pm">10pm to 11pm</option> <option data-www="mo" value="11pm to midnight">11pm to midnight</option>
</select>