selectObject.typeは、ドロップダウンリスト(select要素)が1つ選択タイプか複数選択可能タイプかを取得するプロパティ。
構文
取得
var $type = $selectElementReference.type;
戻り値
- 1つしか選択できないドロップダウンリストであれば、
select-one
を返す。 - 複数選択可能なドロップダウンリストであれば、
select-multiple
を返す。
サンプル
ドロップダウンリストのタイプ:
1つしか選択できないドロップダウンリスト:
複数選択可能なドロップダウンリスト:
サンプルの動作について
- 「1つしか選択できないドロップダウンリスト」ボタンをクリックすると、「ドロップダウンリストのタイプ:」の右横に「select-one」と表示する。
- 「複数選択可能なドロップダウンリスト」ボタンをクリックすると、「ドロップダウンリストのタイプ:」の右横に「select-multiple」と表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function getType( $id ) {
var $elementReference = document.getElementById( $id );
var $type = $elementReference.type;
document.getElementById( "sampleOutput" ).innerHTML = $type;
}
</script>
function getType( $id ) {
var $elementReference = document.getElementById( $id );
var $type = $elementReference.type;
document.getElementById( "sampleOutput" ).innerHTML = $type;
}
</script>
HTML
<p>
<button onclick="getType('sampleA');">1つしか選択できないドロップダウンリスト</button>
<button onclick="getType('sampleB');">複数選択可能なドロップダウンリスト</button>
</p>
<p>ドロップダウンリストのタイプ:<span id="sampleOutput"></span></p>
<p>
1つしか選択できないドロップダウンリスト:
<select id="sampleA">
<option value="選択肢1">選択肢1</option>
<option value="選択肢2">選択肢2</option>
<option value="選択肢3">選択肢3</option>
<option value="選択肢4">選択肢4</option>
<option value="選択肢5">選択肢5</option>
</select>
</p>
<p>
複数選択可能なドロップダウンリスト:
<select id="sampleB" multiple>
<option value="選択肢1">選択肢1</option>
<option value="選択肢2">選択肢2</option>
<option value="選択肢3">選択肢3</option>
<option value="選択肢4">選択肢4</option>
<option value="選択肢5">選択肢5</option>
</select>
</p>
<button onclick="getType('sampleA');">1つしか選択できないドロップダウンリスト</button>
<button onclick="getType('sampleB');">複数選択可能なドロップダウンリスト</button>
</p>
<p>ドロップダウンリストのタイプ:<span id="sampleOutput"></span></p>
<p>
1つしか選択できないドロップダウンリスト:
<select id="sampleA">
<option value="選択肢1">選択肢1</option>
<option value="選択肢2">選択肢2</option>
<option value="選択肢3">選択肢3</option>
<option value="選択肢4">選択肢4</option>
<option value="選択肢5">選択肢5</option>
</select>
</p>
<p>
複数選択可能なドロップダウンリスト:
<select id="sampleB" multiple>
<option value="選択肢1">選択肢1</option>
<option value="選択肢2">選択肢2</option>
<option value="選択肢3">選択肢3</option>
<option value="選択肢4">選択肢4</option>
<option value="選択肢5">選択肢5</option>
</select>
</p>