方法は2つあります。
- 特定option要素をremoveしたり、appendしたりする
- タグでラップしてしまう
ちなみに、hide();する(cssに{display: none;}を追加する)はNGです。
cssではIEが非表示にならないから!というのが発見でした。
まずはHTMLのsampleです。jQueryを読み込む方法は、GoogleCDNより読み込みます。
<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>
<option value=”2″>2番目</option>
<option value=”3″>3番目</option>
<button id=”btn-back”>戻す</button>
</html>
$(function(){
$(‘select#select1 option[value=”1″]’).wrap(‘<span>’);});
$(‘#btn-back’).on(‘click’,function(){
$(‘select#select1 option[value=”1″]’).unwrap(‘<span>’);
});
});