javascript - 使用 jquery 更改级联选择项

Question

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

如果 select2 发生改变，那么它也必须改变 select3。

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

一个例子是，

选择“特定日期和时间”(select1) select2 和 3 都应该隐藏

选择“分钟计时器”(select1) select2 应加载“每分钟”、“每 5 分钟”...列表 隐藏选择3

选择“小时计时器”(select1) select2 应加载“每小时”、“每 2 小时”...列表 隐藏选择3

选择“日间计时器”(select1) select2 应加载“午夜至凌晨 1 点”、“凌晨 1 点至下午 2 点”...列表 隐藏选择3

选择“周定时器”(select1) select2 应加载“每周一”、“每周二”...列表 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

我认为您真正需要的只是处理 $select1 的 change() 事件，然后隐藏/显示选项而不是更改每个选择的整个 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>