javascritpでいつも迷う form のフィールドの取扱い
要するに?
javascript って書き始めると楽しくなるんだけど、
そんなにしょっちゅう使わないから、結構忘れてて。
思い出すまで時間かかるので、思わず遠のく。
大体にして、メインのデバッガーってフォックスだっけ?とか思ってしまってて、
あれ?どこからデベロッパーツール呼び出すんだっけ?とか悩む。
正解は、グーグルチープ。
あ、ちがった、グーグルクロームだ < わざと
で、特に毎回検索するのが select の扱いだ。
基本は、
selectindex で選択中の indexを取り出して・・・
具体的には、選択中のindexは、
var idx; idx = document.getElementById('defkeyword').selectedIndex;で、とりだす。
それから、
if で idx の値を見て代入処理する。
もしくは、select の option value の値で済むなら、
var options = document.getElementById(‘defkeyword’).options; ←長くなるから変数に取り出してるだけ
a = options(selectindex).value
表示内容を突っ込むなら
var options = document.getElementById(‘defkeyword’).options; ←長くなるから変数に取り出してるだけ
a = options (selectindex).text
IDで動的に内容を変化させる
function ChangeStr() { var idx; idx = document.getElementById('defkeyword').selectedIndex; if(idx==1){ document.getElementById('str').textContent='<b>タグ</b>を含まないテキスト'; } if(idx==2){ document.getElementById('str').innerHTML='<b>タグ</b>を含むテキスト'; } // もしくは以下のようにselect タグのオプションを代入するとか・・・ // select タグの場合 options でとれる。 if(idx==2){ var value = options.item(idx).value; document.getElementById('str').innerHTML = value; } }
<select name='defkeyword' id='defkeyword' OnClick="ChangeStr();"> <option value="A">タグを含まない</option> <option value="B">タグを含む</option> </select> <div id="str">ここが書き換わる</div>
今何が入ってるの?
function ViewStr() { var element=document.getElementById("str") alert(element.innerHTML); }
<input type="button" value="CHECK" OnClick="ViewStr();">
select された内容を取り出して、値をセットする
function setOfDef(f) { var idx; idx = document.getElementById('defkeyword').selectedIndex; alert(idx); if(idx>0){ var options =document.getElementById('defkeyword').options; f.kyword.value = options[idx].text; } $defaultkeyword_javstm }
<div align="right"> <input type="button" value="defaut" OnClick="setOfDef(this.form);"> </div>
f.kyword.value = options[idx].text; ← オプションで表示する値が取れる
f.kyword.value = options[idx].value; ← オプションのvaueで設置した値が取れる
スポンサーリンク