プルダウンリストとリストボックス

プルダウンリスト（プルダウンメニューともコンボボックスとも呼ばれる）



リストボックス

formのmethodを省略するとGET



複数選択リストボックス



リストのグループ化

optgroupタグを使うと選択項目をグループ化できる。



記事へ戻る --- 愚鈍人ホーム
JavaScriptの参考書 ／  Ajaxの参考書 ／  HTMLの参考書 ／  CSSの参考書

 

htmlソース

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>プルダウンリストとリストボックス</title>
<link href="/gudon/css/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"> 
	function button1_onclick(form){
		var select1=form.select1;
		var i=select1.selectedIndex;
		if(i>=0){
			var selectedOption=select1.options[i];
			var msg=
				"selectedIndex="+i+"\n"+
				"selectedText="+selectedOption.text+"\n"+
				"selectedValue="+selectedOption.value
			alert(msg);
		}else{
			alert("未選択");
		}
	}
	
	function button1_onclick2(form){
		var select1=form.select1;
		var msg="";
		for(var i=0;i<select1.options.length;i++){
			if(select1.options[i].selected){
				var selectedOption=select1.options[i];
				msg+=
					"selectedIndex="+i+"\n"+
					"selectedText="+selectedOption.text+"\n"+
					"selectedValue="+selectedOption.value+"\n";
			}
		}
		if(msg==""){
			msg="未選択";
		}
		alert(msg);
	}
	
		
	function button1_onclick3(form){
		var select1=form.elements["select1[]"];
		var msg="";
		for(var i=0;i<select1.options.length;i++){
			if(select1.options[i].selected){
				var selectedOption=select1.options[i];
				msg+=
					"selectedIndex="+i+"\n"+
					"selectedText="+selectedOption.text+"\n"+
					"selectedValue="+selectedOption.value+"\n";
			}
		}
		if(msg==""){
			msg="未選択";
		}
		alert(msg);
	}

</script>
</head>
<body>
<h1>プルダウンリストとリストボックス</h1>
<hr />
<h2>プルダウンリスト（プルダウンメニューともコンボボックスとも呼ばれる）</h2>
<form action="test1.php">
	<select name="select1">
		<option value="value1">text1</option>
		<option value="value2">text2</option>
	</select><br />
	<input name="button1" type="button" value="ボタン1"
		onclick="button1_onclick(this.form);"/><br />
	<input name="submitButton" type="submit" value="submitボタン"/>
</form>
<h2>リストボックス</h2>
<p>formのmethodを省略するとGET</p>
<form action="test1.php">
	<select name="select1" size="5">
		<option value="value1">text1</option>
		<option value="value2">text2</option>
	</select><br />
	<input name="button1" type="button" value="ボタン1"
		onclick="button1_onclick(this.form);"/><br />
	<input name="submitButton" type="submit" value="submitボタン"/>
</form>
<h2>複数選択リストボックス</h2>
<form action="test1.php">
	<select multiple="multiple" name="select1[]">
		<option value="value1">text1</option>
		<option value="value2">text2</option>
	</select><br />
	<input name="button1" type="button" value="ボタン1"
		onclick="button1_onclick3(this.form);"/><br />
	<input name="submitButton" type="submit" value="submitボタン"/>
</form>
<h2>リストのグループ化</h2>
<p>optgroupタグを使うと選択項目をグループ化できる。</p>
<form action="test1.php">
	<select size="5" name="select1">
		<optgroup label="group1">
			<option value="value1">text1</option>
			<option value="value2">text2</option>
		</optgroup>
		<option value="value3">text3</option>
		<optgroup label="group2">
			<option value="value4">text4</option>
			<option value="value5">text5</option>
		</optgroup>
	</select><br />
	<input name="button1" type="button" value="ボタン1"
		onclick="button1_onclick(this.form);"/><br />
	<input name="submitButton" type="submit" value="submitボタン"/>
</form>
</body>
</html>