超初心者です、見よう見まねで以下のような、セレクト1を選ぶとセレクト2は「選択」(2を選べばその逆)になる外部javascriptとhtmlを作ってみました。IEでは動く(option valueにリンクする)のですが他(サファリやファイアーフォックス)では全く動きません。どこか変なところがあるのでしょうか?それともIE以外では諦めなければならないでしょうか?ご教授の程、よろしくお願い致します。
#外部javascript(ファイルネーム select.js)
var s;
function reSel(c) {
if(s&&(s!=c)) s.options[0].selected=true;
s=c;
}
function A_Li() { parent.myNew.location.href=document.Link1.select1.options.value;
Sel=document.Link1.select1.selectedIndex;
Ms=document.Link1.select1.options[Sel].value;
reSel(document.Link1.select1); }
function B_Li() { parent.myNew.location.href=document.Link1.select2.options.value;
Sel=document.Link1.select2.selectedIndex;
Ms=document.Link1.select2.options[Sel].value;
reSel(document.Link1.select2); }
#以下 HTMLソース
<script src="./select.js" type="text/javascript" ></script>
<FORM name="Link1">
<select name="select1" onChange="A_Li()">
<option value= new.html selected>選択</option>
<option value= aaa.html>aaa</option>
<option value= bbb.html>bbb</option>
<option value= ccc.html>ccc</option>
</select>
<select name="select2" onChange="B_Li()">
<option value= new.html selected>選択</option>
<option value= ddd.html>ddd</option>
<option value= eee.html>eee</option>
<option value= fff.html>fff</option>
</select>
</FORM >
No.1
- 回答日時:
片方を選択するともう一方が初期状態「選択」にしたいだけであれば、関数A_Li()と関数B_Li()にある
parent.myNew.location.href=document.Link1.select1.options.value;
と
parent.myNew.location.href=document.Link1.select2.options.value;
は不要だと思うのですが…。
早々のご回答誠にありがとうございます。
削除するだけで簡単そうなので手はじめにやってみました。
2つともに削除してやってみましたが、全く動作しませんでした。
削除するだけではなく、何かそのほか足りない部分があるのでしょうか?
ありがとうございました。
No.2
- 回答日時:
もっと単純に・・・
オブジェクトをnameで判断するといろいろ問題が発生しますので
こんな感じでやってみては?
#select.js
function Li(obj){
var f=obj.form;
for(var i=0;i<f.length;i++){
if(f[i].type=="select-one" && f[i]!=obj) f[i].selectedIndex=0;
}
}
#htmlファイル
<script src="select.js" type="text/javascript" ></script>
<form>
<select name="select1" onChange="Li(this)">
<option value="new.html" selected>選択</option>
<option value="aaa.html">aaa</option>
<option value="bbb.html">bbb</option>
<option value="ccc.html">ccc</option>
</select>
<select name="select2" onChange="Li(this)">
<option value="new.html" selected>選択</option>
<option value="ddd.html">ddd</option>
<option value="eee.html">eee</option>
<option value="fff.html">fff</option>
</select>
</form>
この回答への補足
詳しいご回答誠にありがとうございます。
今やってみましたが選択画面は確かに[選択]に戻りますが
それぞれのoption value="***.html"にリンクしませんでした。
このほか何か私の気がつかないミスでもあるのでしょうか?
もしお気づき点などありましたらまたのご回答をお待ちしま
すので、よろしくお願い致します。
ありがとうございました。
No.3
- 回答日時:
さんこうにもなりませんが、ひまなときに^^;
<select name="select1" onChange="Li(this)">
<select name="select2" onChange="Li(this)">
function Li(e) {
'select1 select2'.replace(/\b(\w+?)\b/g,function(c){document.getElementsByName(c)[0].options[0].selected=e.name!=c;});
}
この回答への補足
詳しいご回答誠にありがとうございます。
今やってみましたが選択画面は確かに[選択]に戻りますが
それぞれのoption value="***.html"にリンクしませんでした。
それと私の説明不足で申し訳なかったのですが、
"select2" は他に2つだけではなく、
select3,select4とあります。
このほか何か私の気がつかないミスでもあるのでしょうか?
もしお気づき点などありましたらまたのご回答をお待ちしま
すので、よろしくお願い致します。
ありがとうございました。
No.4
- 回答日時:
原因としては、#2様のご指摘の内容が一番怪しそうな気がしますが…
>IEでは動く(option valueにリンクする)~~
とのことなので、ご質問のソースは子ウインドウのもので
parent.myNew.location.href で親ウインドウを操作しようとしているのでしょうか? myNewが何を指している(つもりな)のか不明ですが、ひょっとして自ウィンドウの名前だったりして??
(この辺はご質問文で説明しておくか、ソースを掲示すべきですね)
まずは、名前指定で行うのであれば(Formのエレメントなので)
document.Link1.select1
↓
document.forms['Link1'].elements['select1']
みたいな、指定方法にしておく方が安全かと思います。
(#2様が例示されているように名前に頼らない方法もあります)
parent.myNew.location.href の部分も同様なのですが、myNewが示すオブジェクトが何なのか不明なので具体例が書けません。
まぁ、上と同じような意味合いで、修正すればよろしいかと…
この回答への補足
詳しいご回答誠にありがとうございます。
私の質問文が不正確で申し訳ありませんでしたが、myNewはインラインフレームです。
このセレクトでmyNewインラインフレーム内のhtmlをリンクさせようと
(<iframe src="new.html" name="myNew">)思っています。
ご指摘の部分を修正して以下のように書き換えましたがやはりIE以外は動作しませんでした。
var s;
function reSel(c) {
if(s&&(s!=c)) s.options[0].selected=true;
s=c;
}
function A_Li() { parent.myNew.location.href=document.forms['Link1'].elements['select1'].options.value;
Sel=document.forms['Link1'].elements['select1'].selectedIndex;
Ms=document.forms['Link1'].elements['select1'].options[Sel].value;
reSel(document.forms['Link1'].elements['select1']); }
function B_Li() { parent.myNew.location.href=document.forms['Link1'].elements['select2'].options.value;
Sel=document.forms['Link1'].elements['select2'].selectedIndex;
Ms=document.forms['Link1'].elements['select2'].options[Sel].value;
reSel(document.forms['Link1'].elements['select2']); }
function C_Li() { parent.myNew.location.href=document.forms['Link1'].elements['select3'].options.value;
Sel=document.forms['Link1'].elements['select3'].selectedIndex;
Ms=document.forms['Link1'].elements['select3'].options[Sel].value;
reSel(document.forms['Link1'].elements['select3']); }
function D_Li() { parent.myNew.location.href=document.forms['Link1'].elements['select4'].options.value;
Sel=document.forms['Link1'].elements['select4'].selectedIndex;
Ms=document.forms['Link1'].elements['select4'].options[Sel].value;
reSel(document.forms['Link1'].elements['select4']); }
このほか何か私の気がつかないミスでもあるのでしょうか?
もしお気づき点などありましたらまたのご回答をお待ちしま
すので、よろしくお願い致します。
ありがとうございました。
No.5
- 回答日時:
そう、じょうけんをこだしにされても・・・
function Li(e) {
document.getElementsByName('myNew')[0].src = e.value;
'select1 select2'.replace(/\b(\w+?)\b/g, function (c) {document.getElementsByName(c)[0].options[0].selected=e.name!=c;});
}
No.6ベストアンサー
- 回答日時:
たびたびすんません。
せれくとをふやすなら、いかのようにするだけ
function Li(e) {
document.getElementsByName('myNew')[0].src = e.value;
'select1 select2 select3 select4'.replace(/\b(\w+?)\b/g, function (c) {document.getElementsByName(c)[0].options[0].selected=e.name!=c;});
}
こんなかきかたは、すすめません。
foreachみなたいなことを、じっけんしてたから、それのおうようと
いうことで。
度々詳しい内容のご回答ありがとうございます。
頂いた回答を貼り付けましたら動作致しました。
知識不足なため、内容はよくわかりませんでしたが、
ファイアーフォックスでも動作致しました。
本当にありがとうございました
No.7
- 回答日時:
#4です。
>myNewはインラインフレームです。
親ウィンドウの中のインラインフレーム?
それとも、自ウィンドウ内のインラインフレーム?
#3でも描きましたがその部分の指定方法が、通じないのだと思われます。
一応、自フレーム内のiframeだと仮定すると…
(親フレーム内の別フレームが対象だとするならば、parentからの
指定が必要になります。その他も含め、位置関係にご注意。)
◆iframeにfrm1などのidを指定して
document.getElementById('frm1').src = ~~~
などで指定する。
(windowオブジェクトを取得してlocationでも良いのでしょうが、
src指定の方が簡単)
◆iframeの名前に重複がないものとすれば
document.getElementsByTagName あるいは
document.getElementsByName などで要素配列を得てそ
のなかから対象を特定する
例:
var n = -1, i = -1;
var e = document.getElementsByTagName('IFRAME');
while (e[++i]) if (e[i].name=='myNew'){ n=i; break; }
if (n>-1) e[n].src = ~~~
みたいな方法でいけると思います。
(ByNameで取るなら、#5様のような指定方法です)
------------------------------------------------
>function A_Li() { parent.myNew.location.href=document.
>forms['Link1'].elements['select1'].options.value;
>Sel=document.forms['Link1'].elements
>['select1'].selectedIndex;
>Ms=document.forms['Link1'].elements['select1'].options
>[Sel].value;
>reSel(document.forms['Link1'].elements['select1']); }
#4の記述法にするにしても、何度も同じエレメントを長い書き方で記述するのは面倒ですよね?
長い記述は1度だけにして、
function Li() {
var elm = document.forms['Link1'].elements['select1'];
(iframeの要素の指定).src = elm.options[elm.selectedIndex].value;
reSel(elm);
}
みたいにすれば、少しはすっきりすると思いますが…
( )内はiframeの要素オブジェクト。
(位置関係がよくわからないので、記載していません。)
さらに、対象(セレクト)が違うだけで、同じ処理を複数行いたいのならば…
functionは一つにしてしまったほうが、簡潔にできます。
その際には、セレクトの識別子(名前とか)を引数で渡して区別すればよいでしょう。引数をthisにしてしまえば、要素の指定も不要になるでしょうから、#2様の回答のように、長い記述そのものがいらなくなります。
度々詳しい内容のご回答ありがとうございます。
頂いた回答を理解しようとしましたが、なかなか理解できなく
まともなjavascriptを書けそうもなく、今回はせっかく頂いたご回答を生かすことができませんでした。もっと勉強が必要です。
大変申し訳ありませんでした。
また何かありましたらどうぞよろしくお願い致します。
本当にありがとうございました。
No.8
- 回答日時:
みたび、すみません。
そもそも、selectが、なんこあろうが、1つだけしかえらべないのなら
それは、1つにまとめるべきだとおもう。
<OPTGROUP>を使うとか・・・。
parentってのがあるから、おやだったね。
「iframe 親の操作 javascript」みたいなので、ぐぐってみてね
var list = ['select1', 'select2'];
var cnt, n;
for(cnt = 0; n = list[cnt++]; ) {
document.getElementsByName(n)[0].options[0].selected = (e.name != n);
}
を1ぎょうでやってみたかっただけ
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript JavascriptからSQLへ繋ぎ方が分からない 3 2022/07/07 00:27
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript 電車の運賃を出すプログラムを作っています。 2 2022/06/22 09:36
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript 2段階プルダウンで1段階目の選択を終えた後に選択ボックスを見えなくしたい 2 2022/07/05 21:58
- JavaScript 中百舌鳥駅と深井駅を入れ替えて選択しても同じ挙動にしたいです。 2 2022/06/24 18:45
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
セレクトメニューで選択された...
-
ラジオボタンとドロップダウン...
-
プルダウン 項目が多いので先頭...
-
jQuery セレクトボックスで選択...
-
html selectの内容を初期値に戻す
-
ラジオボタンでポップアップメ...
-
グーグルマップの初期表示地点...
-
SELECTの生成でselected設定が...
-
セレクトを全て選択されていな...
-
javascriptでHTMLを絞り込み検...
-
jquery での <select multiple=...
-
CSVファイルを読みこみ、プルダ...
-
onchange等のイベントハンドラ...
-
正規表現で複数マッチ条件で悩...
-
ボタン2回押しを無効にしたい
-
<form action="#">の意味とは?
-
<td>の中のonClick="location" で
-
JavaScriptにて動的に配列を作...
-
背景色を変えて未入力チェック...
-
【jsp/Java】チェックボックス...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
プルダウン 項目が多いので先頭...
-
Selectボックスの幅を自動で広...
-
Selectの中身をfor文で入れる
-
html selectの内容を初期値に戻す
-
CSVファイルを読みこみ、プルダ...
-
セレクトを全て選択されていな...
-
ブラウザの戻るボタンを押した...
-
JQuery selectが反映されない
-
jQuery セレクトボックスで選択...
-
セレクトの値を取得できない
-
テーブルにおける行(セルにプル...
-
現在時刻を取得してフォームのs...
-
javascriptでの2つのプルダウン...
-
document.form で nullまたは...
-
リストボックスの項目の順番を...
-
onFocusOutが複数回呼ばれる!
-
javascriptでselectボックスの<...
-
プログラムがうまく動きません...
-
親子連動型のselectを設置し、...
-
selectタグに直接onChangeを書...
おすすめ情報