HTML 選択タグにおける単一選択と複数選択の詳細な説明

<選択>
<option value ="volvo">ボルボ</option>
<option value ="saab">サーブ</option>
<option value="opel">オペル</option>
<option value="audi">アウディ</option>
</選択>

<SELECT NAME="studyCenter" id="studyCenter" SIZE="1">
<OPTION VALUE="0">すべて
<OPTION VALUE="1">湖北テレビ大学オンライン学習センター
<OPTION VALUE="2">成都師範大学オンライン学習センター
<OPTION VALUE="3">武漢職業技術大学オンライン学習センター
</選択>

//複数属性がある場合は、複数の項目を選択できます。
<select name= “教育” id=”教育” multiple=”複数”>
<option value=”1”>高校</option>
<option value=”2”>大学</option>
<option value=”3”>医師</option>
</選択>
//以下には複数の属性はありません。表示されるのは 1 つの項目のみで、複数の選択は許可されません。
<名前を選択= “教育” id= “教育” >
<option value=”1”>高校</option>
<option value=”2”>大学</option>
<option value=”3”>医師</option>
</選択>
//以下はsize属性を設定した場合です。size=3の場合は3つのデータが表示されます。複数選択はできないので注意してください。
<select name="教育" id="教育" size='3'>
<option value="0">小学校</option>
<option value="1">中学校</option>
<option value="2">高校</option>
<option value="3">技術中等学校</option>
<option value="4">大学</option>
<option value="5">学士号</option>
<option value="6">大学院生</option>
<option value="7">医師</option>
<option value="8">ポスドク</option>
<option selected>選択してください</option>
</選択>

@param objSelectId 検証するターゲット選択コンポーネントのID
@param objItemValue 存在を検証する値
関数 isSelectItemExit(objSelectId,objItemValue) {
var objSelect = document.getElementById(objSelectId);
var isExit = false;
if (null != objSelect && typeof(objSelect) != "undefined") {
for(var i=0;i<objSelect.options.length;i++) {
objSelect.options[i].value == objItemValueの場合{
isExit が true である。
壊す;
}
}
}
isExit を返します。
}

@param objSelectId アイテムに追加するターゲット選択コンポーネントのID
@param objItemText 追加するアイテムの内容
@param objItemValue 追加するアイテムの値
関数 addOneItemToSelect(objSelectId,objItemText,objItemValue) {
var objSelect = document.getElementById(objSelectId);
if (null != objSelect && typeof(objSelect) != "undefined") {
// この値の項目が選択リストに既に存在するかどうかを判定します
if(isSelectItemExit(objSelectId,objItemValue)) {
$.messager.alert('prompt message','この値を持つオプションはすでに存在します!','info');
} それ以外 {
var varItem = 新しいオプション(objItemText、objItemValue);
objSelect.options.add(varItem);
}
}
}

@param objSelectId 削除するターゲット選択コンポーネントID
関数removeSelectItemsFromSelect(objSelectId) {
var objSelect = document.getElementById(objSelectId);
var delNum = 0;
if (null != objSelect && typeof(objSelect) != "undefined") {
for(var i=0;i<objSelect.options.length;i=i+1) {
if(objSelect.options[i].selected) {
objSelect.options.remove(i);
delNum = delNum + 1;
i = i - 1;
}
}
（delNum <= 0 ）の場合
$.messager.alert('プロンプトメッセージ','削除するオプションを選択してください!','情報');
} それ以外 {
$.messager.alert('prompt message',''+delNum+' オプションを正常に削除しました!','info');
}
}
}

@param objSelectId 検証するターゲット選択コンポーネントのID
@param objItemValue 存在を検証する値
関数removeItemFromSelectByItemValue(objSelectId,objItemValue) {
var objSelect = document.getElementById(objSelectId);
if (null != objSelect && typeof(objSelect) != "undefined") {
//存在するかどうか判断する
if(isSelectItemExit(objSelect,objItemValue)) {
for(var i=0;i<objSelect.options.length;i++) {
objSelect.options[i].value == objItemValueの場合{
objSelect.options.remove(i);
壊す;
}
}
$.messager.alert('プロンプトメッセージ','正常に削除されました!','情報');
} それ以外 {
$.messager.alert('プロンプトメッセージ','指定された値のオプションが存在しません!','情報');
}
}
}

@param objSelectId クリアするターゲット選択コンポーネントID
関数 clearSelect(objSelectId) {
var objSelect = document.getElementById(objSelectId);
if (null != objSelect && typeof(objSelect) != "undefined") {
for(var i=0;i<objSelect.options.length;) {
objSelect.options.remove(i);
}
}
}

@param objSelectId ターゲット選択コンポーネント ID
@return 選択範囲内のすべての項目の値をカンマで区切って返します
関数 getAllItemValuesByString(objSelectId) {
var selectItemsValuesStr = "";
var objSelect = document.getElementById(objSelectId);
if (null != objSelect && typeof(objSelect) != "undefined") {
var 長さ = objSelect.options.length
for(var i = 0; i < 長さ; i = i + 1) {
（0 == i）の場合{
selectItemsValuesStr = objSelect.options[i].value;
} それ以外 {
selectItemsValuesStr = selectItemsValuesStr + "," + objSelect.options[i].value;
}
}
}
selectItemsValuesStr を返します。
}

@param fromObjSelectId モバイルアイテムの元の選択コンポーネントID
@param toObjectSelectId 移動アイテムが移動するターゲット選択コンポーネントID
関数moveAllSelectedToAnotherSelectObject(fromObjSelectId, toObjectSelectId) {
var objSelect = document.getElementById(fromObjSelectId);
var delNum = 0;
if (null != objSelect && typeof(objSelect) != "undefined") {
for(var i=0;i<objSelect.options.length;i=i+1) {
if(objSelect.options[i].selected) {
選択する項目を追加します(toObjectSelectId、objSelect.options[i].text、objSelect.options[i].value)
objSelect.options.remove(i);
i = i - 1;
}
}
}
}

@param fromObjSelectId モバイルアイテムの元の選択コンポーネントID
@param toObjectSelectId 移動アイテムが移動するターゲット選択コンポーネントID
関数moveAllToAnotherSelectObject(fromObjSelectId, toObjectSelectId) {
var objSelect = document.getElementById(fromObjSelectId);
if (null != objSelect) {
for(var i=0;i<objSelect.options.length;i=i+1) {
選択する項目を追加します(toObjectSelectId、objSelect.options[i].text、objSelect.options[i].value)
objSelect.options.remove(i);
i = i - 1;
}
}
}