IE以外のブラウザで対応するには

質問

超初心者です、見よう見まねで以下のような、セレクト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.6

babu_baboo · ベストアンサー

たびたびすんません。
せれくとをふやすなら、いかのようにするだけ

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.8

babu_baboo

みたび、すみません。
そもそも、selectが、なんこあろうが、１つだけしかえらべないのなら
それは、１つにまとめるべきだとおもう。

<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);
}
を１ぎょうでやってみたかっただけ

回答No.7

fujillin

#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.5

babu_baboo

そう、じょうけんをこだしにされても・・・

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.4

fujillin

原因としては、#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.3

babu_baboo

さんこうにもなりませんが、ひまなときに^^;
<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.2

yambejp

もっと単純に・・・
オブジェクトを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.1

x_jouet_x

片方を選択するともう一方が初期状態「選択」にしたいだけであれば、関数A_Li()と関数B_Li()にある

parent.myNew.location.href=document.Link1.select1.options.value;
と
parent.myNew.location.href=document.Link1.select2.options.value;
は不要だと思うのですが…。

お礼

早々のご回答誠にありがとうございます。
削除するだけで簡単そうなので手はじめにやってみました。
２つともに削除してやってみましたが、全く動作しませんでした。
削除するだけではなく、何かそのほか足りない部分があるのでしょうか？
ありがとうございました。