jQueryでselect要素の特定のoptionを隠したい！

菱田直哉
select要素の特定のoptionを隠すにはどうしたらいいか調べた。

方法は２つあります。

  1. 特定option要素をremoveしたり、appendしたりする
  2. タグでラップしてしまう

ちなみに、hide();する（cssに{display: none;}を追加する）はNGです。

cssではIEが非表示にならないから！というのが発見でした。

菱田直哉
では早速。

まずはHTMLのsampleです。jQueryを読み込む方法は、GoogleCDNより読み込みます。

モリー
jquery-sample_001.html
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>jQuery test</title>
<!– <script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js”></script> –>
<script
src=”https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js”></script>
<script src=”../js/jquery-sample_001.js”></script>
</head>
<body>
 <select id=”select1″>
  <option value=”1″>1番目</option>
<option value=”2″>2番目</option>
<option value=”3″>3番目</option>
 </select>
 <button id=”btn-hide”>隠す</button>
<button id=”btn-back”>戻す</button>
</body>
</html>
モリー
jquery-sample_001.js

// jQueryでselect要素の特定のoptionを隠したい！
$(function(){
 $(‘#btn-hide’).on(‘click’,function(){
$(‘select#select1 option[value=”1″]’).wrap(‘<span>’);});

$(‘#btn-back’).on(‘click’,function(){
$(‘select#select1 option[value=”1″]’).unwrap(‘<span>’);

});
});

菱田直哉
あ、隠れたね。