菱田直哉
select要素の特定のoptionを隠すにはどうしたらいいか調べた。
方法は２つあります。
- 特定option要素をremoveしたり、appendしたりする
- タグでラップしてしまう
ちなみに、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>
<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>
<option value=”2″>2番目</option>
<option value=”3″>3番目</option>
</select>
<button id=”btn-hide”>隠す</button>
<button id=”btn-back”>戻す</button>
<button id=”btn-back”>戻す</button>
</body>
</html>
</html>
モリー
jquery-sample_001.js
// jQueryでselect要素の特定のoptionを隠したい！
$(function(){
$(function(){
$(‘#btn-hide’).on(‘click’,function(){
$(‘select#select1 option[value=”1″]’).wrap(‘<span>’);});
$(‘select#select1 option[value=”1″]’).wrap(‘<span>’);});
$(‘#btn-back’).on(‘click’,function(){
$(‘select#select1 option[value=”1″]’).unwrap(‘<span>’);
});
});
菱田直哉
あ、隠れたね。