どのオプションが選択されているかチェックし、選択されたオプションに関して表示されるリスト項目を制御します。

Question

jquery/jsの新機能です。 私は、選択したオプションに関してどのリストアイテムを表示するかを制御しようとしています。 スクリプトの最初の条件は好きなように機能しますが、2番目の条件は機能しません。 ：nth-​​of-type（2）：選択したものが動作しない理由がわかりません：

また、私は本のjqueryを本当に知らないので、これが正しいアプローチであるかどうかは分かりません。

ご質問やご提案は大歓迎です！

ありがとうございました。

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') 
 

 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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 item</li> 
 
    <li class="hide-me">list item</li> 
 
    <li class="hide-me">list item</li> 
 
    <li class="hide-me">list item</li> 
 
    <li class="hide-me">list item</li> 
 
    <li class="hide-me">list item</li> 
 
    <li class="hide-me">list item</li> 
 
    <li class="hide-me">list item</li> 
 
    <li class="hide-me">list item</li> 
 
    <li class="hide-me">list item</li> 
 
    </ul> 
 
</div>

Answer 1

あなたがchangeイベントを持っていないので、この

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>

そのは、その動作していない理由をお試しください。 #monthlyに変更イベントを追加してそこに条件を追加するだけです。

Answer 2

私はそれはそれだった見

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'); 
 

 
    } 
 
    
 
    }); 
 

 
});

.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" 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>