jQueryでセレクトボックスを操作する方法を5つ紹介

jQueryでセレクトボックスを操作する方法を5つ紹介 jQuery

ウェブシステムを実装しているとフォームの入力内容によって、セレクトボックスを変更することも多いと思います。ここでは、jQueryでセレクトボックスを操作する方法を紹介します。選択中の値の取得、選択中のラベルの取得、値による選択、項目の追加、選択中の項目の削除の5つを紹介します。どれも基礎なので、覚えておくと便利かと思います。

■対象のフォーム

以下の様なフォームに対してスクリプトを実行します。

<select id="select_box_list">
	<option value="test1">セレクト１</option>
	<option value="test2">セレクト２</option>
	<option value="test3">セレクト３</option>
</select>

<button id="test_button">値の取得ボタン</button>

 

 

■選択中の値を取得する

ボタンを押した時に、選択中のvalueを取得するための方法です。

$(document).ready(function(){
	$("#test_button").click( function(){
		var test_valule = $("#select_box_list").val();
		alert(test_value);
	});
});

 

もし、セレクト２が選択されている時にボタンを押すと、test_valueにtest2が代入されます。

 

■選択中のラベルを取得する

ボタンを押した時に、選択中のラベルを取得するための方法です。

$(document).ready(function(){
	$("#test_button").click( function(){
		var test_value = $("#select_box_list option:selected").text();
		alert(value);
	});
});

もし、セレクト２が選択されている時にボタンを押すと、【セレクト２】がtest_valueに入ります。

 

■設定した値の項目を選択する

ボタンを押した時に、test3を選択させる方法です。valの引数に選択したいoptionのvalueを設定することで、対象のセレクトボックスが選択されます。

$(document).ready(function(){
	$("#test_button").click( function(){
		$("#select_box_list").val("test3");
	});
});

 

■項目の追加

ボタンを押した時に、セレクトボックスの項目を追加する方法です。ボタンをおすと【セレクト４】という項目が追加されます。

$(document).ready(function(){
	$("#test_button").click( function(){
		$('#select_box_list').append($('<option>').html("セレクト４").val("test4"));
	});
});

 

■選択されている項目の削除

ボタンを押した時に、選択中の項目を削除する方法です。選択中の要素をremoveしてあげることで項目が削除されます。

$(document).ready(function(){
	$("#test_button").click( function(){
		$('#select_box_list > option:selected').remove();
	});
});

 

細かいところですが、組み合わせるとユーザビリティが向上すると思います。IDの内容やイベントが起動するタイミングなどは適宜設定してください。

ぜひ、確認してみてください。では。

スポンサーリンク