ドロップダウンリストやリストボックスの選択項目の操作







記事へ戻る --- 愚鈍人ホーム
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">
	var chgCnt = 0;
	function chgButton_onclick(select1) {
		var i = select1.selectedIndex;
		chgCnt++;
		select1.options[select1.selectedIndex] = 
			new Option("changeText" + chgCnt, "changeValue" + chgCnt, false, true);
	}

	var insCnt = 0;
	function insButton_onclick(select1) {
		var j = select1.selectedIndex;
		select1.options.length++;
		for(var i = select1.options.length - 1; i > j; i--) {
			select1.options[i].text = select1.options[i - 1].text;
			select1.options[i].defaultSelected = 
				select1.options[i - 1].defaultSelected;
			select1.options[i].selected = false;
		}
		insCnt++;
		select1.options[j] = 
			new Option("insertText" + insCnt, "insertValue" + insCnt, false, true);
	}

	var addCnt = 0;
	function addButton_onclick(select1) {
		addCnt++;
		select1.add(new Option("addText" + addCnt, "addValue" + addCnt));
	}

	function delButton_onclick(select1) {
		select1.options[select1.selectedIndex] = null;
	}

	function numButton_onclick(select1) {
		select1.options.length=4;
	}
</script>
</head>
<body>
<h1>ドロップダウンリストやリストボックスの選択項目の操作</h1>
<hr />
<form action="test1.php">
	<select name="select1">
		<option value="value1">text1</option>
		<option value="value2">text2</option>
		<option value="value3">text3</option>
	</select><br />
	<input name="chgButton" type="button" value="項目の修正"
		onclick="chgButton_onclick(this.form.select1);"/><br />
	<input name="insButton" type="button" value="項目の挿入"
		onclick="insButton_onclick(this.form.select1);"/><br />
	<input name="addButton" type="button" value="項目の追加"
		onclick="addButton_onclick(this.form.select1);"/><br />
	<input name="delButton" type="button" value="項目の削除"
		onclick="delButton_onclick(this.form.select1);"/><br />
	<input name="numButton" type="button" value="項目数の4に変更"
		onclick="numButton_onclick(this.form.select1);"/><br />
</form>
</body>
</html>