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

      2016/05/25

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

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

■対象のフォーム

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

<select id="select_box_list">
	<option value="test1">セレクト1</option>
	<option value="test2">セレクト2</option>
	<option value="test3">セレクト3</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);
	});
});

 

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

 

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

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

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

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

 

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

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

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

 

■項目の追加

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

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

 

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

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

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

 

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

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

megane

megane

最近、個人事業主から法人へと進化しました。 エンジニア歴13年位です。PHPとかMysqlを使ってWebシステムを構築します。 Javaも書きます。 CakePHPも使います。 サーバのチューニングもごりごりやります。 あと、お肉と自動車が好きです。Twitterとか申請どうぞ。

 - jQuery ,