初めに
今回は二つのselestタグの内容を連動させてみます。
一方のSelectタグでリンゴを選んだら、もう一つではAppleになるといった感じです。
それではやってみましょう。
一方のSelectタグでリンゴを選んだら、もう一つではAppleになるといった感じです。
それではやってみましょう。
目次
目標
二つのSelectタグの内容を連動させる。
サンプルコード
sample.html
|
<html>
<head>
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<link href="./sample.css" rel="stylesheet" type="text/css" />
<title>Selecters</title>
<script type="text/javascript">
function A_B(form){
form.us.selectedIndex = form.jp.selectedIndex;
}
function B_A(form){
form.jp.selectedIndex = form.us.selectedIndex;
}
</script>
</head>
<body>
<div class="container">
<main>
<div>
<form id="selecters1"
name="selecters1">
<select name="jp"
onChange="A_B(this.form);">
<option value="1">杏子</option>
<option value="2">イチゴ</option>
<option value="3">バナナ</option>
<option value="4">リンゴ</option>
</select>
<select name="us"
onChange="B_A(this.form);">
<option>apricot</option>
<option>strawberry</option>
<option>banana</option>
<option>apple</option>
</select>
</form>
<form id="selecters2"
name="selecters2">
<select name="jp" onChange="A_B(this.form);" size="4">
<option value="1">杏子</option>
<option value="2">イチゴ</option>
<option value="3">バナナ</option>
<option value="4">リンゴ</option>
</select>
<select name="us" onChange="B_A(this.form);" size="4">
<option>apricot</option>
<option>strawberry</option>
<option>banana</option>
<option>apple</option>
</select>
</form>
</div>
</main>
</div>
</body>
</html>
|
samplecss.html
省略します。
実行例-表示例
ポイント！
Select要素で選択されているものは、
[Select要素の名前].selectedIndexを使って取得できる。
selectedIndexに数値を入れれば選択肢をJavascriptで選ぶことができる
[Select要素の名前].selectedIndexを使って取得できる。
selectedIndexに数値を入れれば選択肢をJavascriptで選ぶことができる
終わりに
もっと書かないと設定不可能かと思ってましたが、
関数1つにつき各1行で相互連携するSelect要素が実現できました。
今回の実行例はIEで撮っていますが、
Chromeを使うと選択肢の各要素の行間が違うのか下のようにちょっとづつずれてしまします。
関数1つにつき各1行で相互連携するSelect要素が実現できました。
今回の実行例はIEで撮っていますが、
Chromeを使うと選択肢の各要素の行間が違うのか下のようにちょっとづつずれてしまします。
これが気持ち悪かったんですが、どうにかならないものかと思うところです。
ご利用は自己責任で！
以上です。
ご利用は自己責任で！
以上です。
0 件のコメント:
コメントを投稿