人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

javascriptでform操作についての質問です。

function hoge(){
document.AA.AAA[1].selected = true;
}
・・・略

<form name="AA" action="#" style="margin:0px;">
<select name="AAA">
<option value="">-- select --</option>
<option value="ABC" title="ABC" >エービーシー</option>
<option value="XYZ" title="XYZ" >エックスワイゼット</option>
</select>
・・・・略


function hoge()を呼び出せば、セレクトボックスの
<option value="ABC" title="ABC" >エービーシー</option>
を選択することができます。

しかし、下記のURLページのように、フォームを3つ連動させた場合には、
上記の命令文だと、二個目のフォームが表示しません。

http://www.skuare.net/test/jdependent.html

マウスでクリックした動作と、
selected = true の動作が違うためだと考えられます。

javascriptでなにか使えそうな命令文、同じような動作をさせる方法
など知っている方いましたら教えていただけますか?

●質問者: きくりん
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:AA aaa hoge JavaScript SELECT
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● Mars
●35ポイント ベストアンサー

まじめに対処すると面倒そうですが、jQueryを使ってるならtriggerが使えるのでonchangeで実行される処理を走らせることもできそうです。

http://semooh.jp/jquery/api/events/trigger/type%2C+%5Bdata%5D/

function hoge(){
document.AA.AAA[1].selected = true;
$(document.AA.AAA).trigger('change');
}
◎質問者からの返答

なにも問題なく、スムーズにできました。お答えありがとうございます。

無回答の場合も考えて、jQueryを使わないようにして、

3時間程度javascriptで動的に書き出すようにソース書いてました。

回答者さんのおっしゃるとおり、まじめに対処してましたので、面倒でした。(^^)

まあ、なにはともあれ良かったです。


2 ● tomotomo
●35ポイント

jQueryのvalメソッドを使えば簡単ですね。

http://semooh.jp/jquery/api/attributes/val/val/

<!-- selectにIDを付けましょう //-->
<select id="targ_1" name="hoge">
<option value=""></option>
<option value="a">値は「a」</option>
</select>
<select id="targ_2" name="hogehoge">
<option value=""></option>
<option value="あ">値は「あ」</option>
</select>

// javascript
function hoge() {
 $('#targ_1').val('a');
 $('#targ_2').val('あ');
}

これでそれぞれのセレクトで「a」と「あ」が選択されます。

別にdocument.getElementById()でも良いけどjQuery使えばもっと簡単に操作できますよ。

◎質問者からの返答

スムーズに、且つ、簡単にできました。

ありがとうございます。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ