QA@IT

iphonサイトで2つのjumpSelectを使用しようとすると全く動作しない。

3479 PV

はじめまして、お世話になります。
お詳しい方どうかご教授頂けませんでしょうか。
iphoneでサイトを作成しています。あるページで以下の様なjumpSelectを使用して、機能しています。(javascriptの設定は正しいと思います。)

<form name="url">
<select name="item"onchange="jumpSelect()"class="boxMini text data-role-none">
<option ><p>地域</p></option>
<option value="/hokkaido.php">北海道</option>
<option value="/tokyo.php">東京</option>
<option value="/okinawa.php">沖縄</option>
</select>
</form>  
</div>

しかしながら、同じページで以下の様にjumpSelectを2つ使用しようとすると両方とも動かなくなります。(全く動作しない)以下を両方とも機能させるにはどうしたらよろしいのでしょうか。

<form name="url">
<select name="item"onchange="jumpSelect()"class="boxMini text data-role-none">
<option ><p>地域</p></option>
<option value="/hokkaido.php">北海道</option>
<option value="/tokyo.php">東京</option>
<option value="/okinawa.php">沖縄</option>
</select>
</form>  
</div>

<form name="url">
<select name="item"onchange="jumpSelect()"class="boxMini text data-role-none">
<option ><p>スポーツ</p></option>
<option value="/soccer.php">サッカー</option>
<option value="/baseball.php">野球</option>
<option value="/judo.php">柔道</option>
</select>
</form>  
</div>

回答

提示されたコードの中では

以下の様に formの名前を url2 などにすれば動くんじゃないかと思います。
(jumpSelect2内のurlも変わってます。)

<form name="url2">
<select name="item" onchange="jumpSelect2()" class="boxMini top data-role-none">
<script type="text/javascript">//<![CDATA[
            <!--{$tpl_javascript}-->
            $(function(){
                <!--{$tpl_onload}-->
            });
        //]]>
function jumpSelect2()
{
num_item=document.url2.item.selectedIndex;
    if(num_item!=""||num_item!=null)
    {
    location.href=document.url2.item.options[num_item].value;
    }
}
</script>

form="url"が2つある状態で、もう一つの方が動いてるというのがちょっと不思議ではあるんですが...
上記のに加えてfunction jumpSelect()<form name="url"があるんですよね?

動くようになったら最終的には url2とかではなくて別の名前を与えてあげるようにしてください。
なんのurlを格納してるかがわかるような名前。
またjumpSelect2に関してもそれに伴う名前に変えてあげてください。
2とか3とかは後あと見てなんだかわからなくなるので。
(でも動くようになる前には直さない方がいいと思います。人間2つの事を同時にやろうとするとミスったときにどっちのミスか気づきにくいので。)

余力があれば一つの関数(jumpSelect)でうまい事できる方法はないか探してみるのも良いと思います。

編集 履歴 (3)
  • flied_onion様から頂きました設定をそのまま使用して見事に動きました。
    ありがとうございます。名称を変更して試せそうなものが多すぎてどれを変更してよいかわかりませんでした。貴重なお時間を頂きまして感謝いたします。またアドバイス通り更なる設定変更を試したいと思います。
    -

flied_onion様

説明不足のなか、いろいろとお調べになられた上でご教授頂きまして感謝いたします。いろいろと試した結果以下に行き着きましたが、動きません。(もう一つの方は動いておりますが)どこを変更すればよろしいでしょうか。

(Tpl)

<form name="url">
<select name="item" onchange="jumpSelect2()" class="boxMini top data-role-none">

(javascript)

    <script type="text/javascript">//<![CDATA[
            <!--{$tpl_javascript}-->
            $(function(){
                <!--{$tpl_onload}-->
            });
        //]]>
function jumpSelect2()
{
num_item=document.url.item.selectedIndex;
    if(num_item!=""||num_item!=null)
    {
    location.href=document.url.item.options[num_item].value;
    }
}
</script>
編集 履歴 (3)

jumpSelectというのは標準の関数ではありませんのでそれを示してもらわないとハッキリしたことはいえません。

おそらく参考にされたであろうサイトを見つけましたが、そのjavascriptでは
document.url.item といった要素へのアクセス方法をとっています。

しかし同じ名前(name)属性のタグを増やしたため、document.urlだけではどちらのformタグなのか判断できなくなっているのが原因です。

2つ目のformのname属性を変えてそれに対応したjumpSelectを別名で作るとか、別の方法で要素を特定するようにjumpSelectを直すなどするしかないでしょう。


関係ないですが

<select name="item"onchange="jumpSelect()"class="boxMini text data-role-none">

の値と次の属性名の間はスペースを入れないと読みづらいと思いますよ。

<select name="item" onchange="jumpSelect()" class="boxMini text data-role-none">
編集 履歴 (0)
ウォッチ

この質問への回答やコメントをメールでお知らせします。