初めに
前回の 相互連動するSelect要素を作ってみた。 で欠陥(使い方次第な気もするけど)を見つけたので作り直してみました。
それではやってみましょう。
それではやってみましょう。
目次
目標
二つのSelectタグを連動させる。
片方に対応する要素がないとき、個数が合わないときは案内を表示する。
サンプルコード
sample.html
<html>
<head>
<meta content="IE=edge"
http-equiv="X-UA-Compatible" />
<link href="./samplecss.css"
rel="stylesheet"
type="text/css" />
<title>Selecters</title>
<script type="text/javascript">
function SyncSelect(OrnerID,MirrorID){
//idからオブジェクトを取得
var Ob_Orner = document.getElementById(OrnerID);
var Ob_Mirror = document.getElementById(MirrorID);
//シンクロ元で選ばれた要素の値を取得
var selectedIndexvalue =
Ob_Orner.options[Ob_Orner.selectedIndex].value;
//検索成否のフラグ
var flag_SearchSuccess = false;
//シンクロ先のOptionの値を順にシンクロ元の選ばれた要素の値と参照
for(var i=0;i<Ob_Mirror.length;i++){
//値が合致した場合には合致した要素の番号をSelectedIndexで指定
//検索成否のフラグを書き換える
if(Ob_Mirror.options[i].value==selectedIndexvalue){
Ob_Mirror.selectedIndex=i;
flag_SearchSuccess = true;
}
}
//検索成否での最終処理
//今回は失敗した場合には、0番目(選択を促すメッセージ)を表示して
//操作不可能にしました。
if(!flag_SearchSuccess){
Ob_Mirror.selectedIndex=0;
Ob_Mirror.disabled=true;
}
else{
Ob_Mirror.disabled=false;
}
}
</script>
</head>
<body>
<div class="container">
<main>
<div>
<form id="selecters" name="selecters">
<select name="Fruitnamejp" id="Fruitnamejp"
onChange="SyncSelect('Fruitnamejp','Fruitnameen');">
<option value="99999999">くだものを選ぶ</option>
<option value="0">杏子</option>
<option value="1">イチゴ</option>
<option value="3">梨</option>
<option value="4">バナナ</option>
<option value="5">リンゴ</option>
</select>
<select name="Fruitnameen" id="Fruitnameen"
onChange="SyncSelect('Fruitnameen','Fruitnamejp');">
<option value="99999999">Select Fruit</option>
<option value="0">Apricot</option>
<option value="1">Strawberry</option>
<option value="2">Pineapple</option>
<option value="4">Banana</option>
<option value="5">Apple</option>
</select>
</form>
</div>
</main>
</div>
</body>
</html>
|
samplecss.css
省略します。実行例-表示例
英語の選択肢には梨に対応するものがなく、日本語の列にはPineappleがありません。
無いものを選択するとそれぞれ、「くだものを選ぶ」と「SelectFruts」が表示されて、
操作できないようになっています。
無いものを選択するとそれぞれ、「くだものを選ぶ」と「SelectFruts」が表示されて、
操作できないようになっています。
ポイント！
-
Selectオブジェクト.options[index].valueでoptin要素のvalueの値を参照できる。
なので、Selectオブジェクト.options[Selectオブジェクト.selectedIndex].valueで
今選ばれているものの値を取得できる。
- Selectオブジェクト.disabled=trueで要素を操作不能にできる。
終わりに
列単位で必ず対応するものがあるとも限らないし、こっちの方がベターな気がしました。
参考になれば幸いです。
ご利用は自己責任で。
参考になれば幸いです。
ご利用は自己責任で。
0 件のコメント:
コメントを投稿