特定の文字列を含むIDを検索[javascript]

こんなHTMLがあったとする

<select id="page">
	<option value="1">1ページ目</option>
	<option value="2">2ページ目</option>
</select>

<select id="hoge_1">
	<option value="0">hoge</option>
	<option value="1">piyo</option>
</select>

<select id="hoge_2">
	<option value="0">hoge</option>
	<option value="1">piyo</option>
</select>

<select id="hoge_3">
	<option value="0">hoge</option>
	<option value="1">piyo</option>
</select>

一番上の id=”page” は表示しておいて、id=”hoge_n” は全て非表示にしたい！とかいう場面…けっこうある。と思う。たぶん。selectタグが全て id=”hoge_n” だったら、document.getElementsByTagName(‘select’) でタグ全てを取得すれば良いんだけど、そんなの非現実的だし、後から同じタグだけど別の役割を持たせているコードを入れた瞬間に正しく動作しなくなる。

じゃあマッチさせてみよう

というわけで、document.getElementsByTagName(‘select’) で全ての selectタグを取得した後、ID名が指定のもの（今回は hoge ）にマッチするかどうかを判定すれば良い。

<script type="text/javascript">
window.onload = function(){
	var parents = 'hoge_';
	selectObj = document.getElementsByTagName('select');
	matchObj= new RegExp(parents);
	
	for(i=0; i < selectObj.length; i++){
		if(selectObj[i].id.match(matchObj)){
			selectObj[i].style.display = "none";
		}
	}
}
</script>

こうすれば selectタグの中の ID名に「hoge_」を含むものだけを style.display = “none” にできる。

逆に個別に指定して表示したい時は document.getElementById(‘hoge_1’).style.display = “inline” とすればできる。