使用jquery

Question

我想实现重复，我有3个选择，即当select1被更改时，它必须更改select2和select3

如果更改了select2，则必须更改select3。

对于select1的某些值，必须隐藏select3。

一个例子是，

选择“特定日期和时间”（select1） select2和3都应隐藏

选择“分钟计时器”（select1） select2应加载“每分钟”，“每5分钟”...列表 隐藏select3

选择“小时计时器”（select1） select2应加载“每小时”，“每2小时”...列表 隐藏select3

选择“day timer”（select1） select2应该加载“午夜到凌晨1点”，“凌晨1点到2点”...列表 隐藏select3

选择“周定时器”（select1） select2应加载“Every Monday”，“Every Tue”...列表 select3应该加载“午夜到凌晨1点”，“凌晨1点到2点”......列表

选择“月计时器”（select1） select2应加载“1”，“2”...列表 select3应该加载“午夜到凌晨1点”，“凌晨1点到2点”......列表

我无法按预期执行。

的Javascript

 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>

Answer 1

我认为您实际需要的只是处理change()的{​​{1}}事件，然后隐藏/显示选项而不是更改整个$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;
}

Answer 2

将所有javascript代码包装在

中

$( document ).ready(function() { //javascript code here });