检查选择了哪个选项，并控制相对于所选选项显示的列表项

Question

我对jquery / js相当新。 我试图控制哪个列表项显示相对于所选选项。 脚本中的第一个条件是我喜欢的，但第二个条件并不适用。 我不确定为什么：nth-​​of-type（2）：当选择的：nth-​​of-type（1）：selected有效时，所选择的不起作用？

另外，我不太了解书中的jquery，所以我不确定这是否是正确的方法。

任何答案或建议都将不胜感激！

感谢。

＆＃13;

＆＃13;

import { Handlers } from '../../constants/Handlers'; 

eventHandlers() {
  this.events.subscribe(Handlers.HOME_PAGE_TRANSACTION_HANDLER, this.transactionHandler);
  }

＆＃13;

var $monthlyOption = '#monthly option';
var $list = '.top-list ul li';

$(document).ready(function() {

  if ($($monthlyOption).is(':nth-of-type(1):selected')) {

    $($list).slice(0, 5).removeClass('hide-me')

  } else if ($($monthlyOption).is(':nth-of-type(2):selected')) {

    $($list).slice(5, 10).removeClass('hide-me')

  }

});

＆＃13;

＆＃13;

＆＃13;

Answer 1

试试这个

var $monthlyOption = '#monthly option';
var $list = '.top-list ul li';

$(document).ready(function() {

  if ($($monthlyOption).is(':nth-of-type(1):selected')) {

    $($list).slice(0, 5).removeClass('hide-me')

  } else if ($($monthlyOption).is(':nth-of-type(2):selected')) {

    $($list).slice(5, 10).removeClass('hide-me')

  }
  $('#monthly').on('change', function() {
    if ($($monthlyOption).is(':nth-of-type(1):selected')) {

      $($list).slice(0, 5).removeClass('hide-me')

    } else if ($($monthlyOption).is(':nth-of-type(2):selected')) {

      $($list).slice(5, 10).removeClass('hide-me')

    }
  });
});

.hide-me {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-group">
  <select id="monthly">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>
</div>

<div class="top-list">
  <ul>
    <li class="hide-me">list item1</li>
    <li class="hide-me">list item2</li>
    <li class="hide-me">list item3</li>
    <li class="hide-me">list item4</li>
    <li class="hide-me">list item5</li>
    <li class="hide-me">list item6</li>
    <li class="hide-me">list item7</li>
    <li class="hide-me">list item8</li>
    <li class="hide-me">list item9</li>
    <li class="hide-me">list item10</li>
  </ul>
</div>

因为您没有change事件而无法使用它的原因。将更改事件添加到#monthly，只需在此处添加您的条件即可。

Answer 2

试试这个.......

＆＃13;

＆＃13;

var monthlyOption = '#monthly option';
var list = '.top-list ul li';

$(document).ready(function() {

if($("select[name='monthly']")[0].selectedIndex == 0)
    {
    $(list).slice(0, 5).removeClass('hide-me');
    $(list).slice(5, 10).addClass('hide-me');
    }

 if($("select[name='monthly']")[0].selectedIndex == 1)
    {

    $(list).slice(5, 10).removeClass('hide-me');
     $(list).slice(0, 5).addClass('hide-me');

  }
  if($("select[name='monthly']")[0].selectedIndex == 2)
    {

    $(list).slice(5, 10).addClass('hide-me');
     $(list).slice(0, 5).addClass('hide-me');

  }
  $('#monthly').on('change', function() 
  {
    if($("select[name='monthly']")[0].selectedIndex == 0)
    {
    $(list).slice(0, 5).removeClass('hide-me');
     $(list).slice(5, 10).addClass('hide-me');
    }

 if($("select[name='monthly']")[0].selectedIndex == 1)
    {

    $(list).slice(5, 10).removeClass('hide-me');
     $(list).slice(0, 5).addClass('hide-me');

  }
  
   if($("select[name='monthly']")[0].selectedIndex == 2)
    {

    $(list).slice(5, 10).addClass('hide-me');
     $(list).slice(0, 5).addClass('hide-me');

  }
  
  });

});

＆＃13;

.hide-me
{
  display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <select id="monthly" name="monthly">
  <option selected>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>
</div>

<div class="top-list">
  <ul>
    <li class="hide-me">list item1</li>
    <li class="hide-me">list item2</li>
    <li class="hide-me">list item3</li>
    <li class="hide-me">list item4</li>
    <li class="hide-me">list item5</li>
    <li class="hide-me">list item6</li>
    <li class="hide-me">list item7</li>
    <li class="hide-me">list item8</li>
    <li class="hide-me">list item9</li>
    <li class="hide-me">list item10</li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;