QA@IT

iphoneでのselectタグでDone押したときの挙動について

4290 PV

現在、サーバ側をRails3.2,JQUERY MOBILE1.2で開発しています。このサーバに対してクライアント側はIos5の標準のブラウザであるSafariでアクセスをしてきたという想定で開発をしています。
クライアントがHTMLのSelectタグを押した際に表示されるPicker内で、完了ボタン(ないしはDoneボタン)を押したときに、画面遷移を行いたいのですがどのように指定すればよいかわからず困って、質問させていただきました。

具体的に例を挙げて説明させていただきます。

現在、サイト側のタグの一覧をPicker形式で表示させて、その中からユーザ(Iphone側)が選んだタグに関連するurlに飛ばしたいと考えています。
そこでまずIosのSafariに対して、HTMLをどのように書けばPicker形式で表示されるか色々試した結果、html5のselectタグを使うとちょうどよく表示される事がわかりました。
そこで私はhtmlに以下のように書きました。

<select class="select-box">
    <option value="" selected="">タグ一覧</option>
    <option value="http://127.0.0.1:3000/blogs?tag=hello">hello</option>
    <option value="http://127.0.0.1:3000/blogs?tag=world">world</option>
</select>

これでIphone側でここをタッチすると、hello,worldのタグ一覧がPicker形式で表示されましたが、タグを選んで「Done」を押しても画面遷移しません(選んだ値でhtml側の表示はかわっていますが、valueで指定した値に対して画面遷移はおこなっていません)。

どうすれば「Done」を押すと画面遷移できるようになるんでしょうか?

ご回答いただけると幸いです。

  • その「Doneボタン」のソースコードを提示してもらえないと答えようがありません。 -
  • お返事ありがとうございます。こちらの質問の仕方が悪くうまく意図が伝わっていないと感じたため、質問内容を編集しました。
    ここでいう「Doneボタン」というのはPickerに表示される右上のボタンという意味で解釈していただけると幸いです。
    -
  • では、そのPickerのDoneボタンに関連付けられているソースコードを提示してください。 -
  • ん?もしかして、何もコードを書いていないのですか?「どのようなコードを書けばよいのか?」というのが質問の内容ですか? -
  • いえ、DoneボタンはSafariに標準で付属している機能ですので私は実装していません。少し誤解があるようですが、私はiosに対して、アプリを実装していません。ここで問題にしたいのは、HTML側でJavascript等を使ったりして、Doneボタンを押した際の挙動をコントロールしたいのです。 -
  • あ、わかりました。自分のPickerという言い方が誤解を招いたんですね。このスクロールする機能をなんといえばいいのかわからなかったので、UIPickerから名前をとってきてしまいました。なんといえばいいんでしょうか? -
  • 私がさっきから言っているソースコードというのは、そのHTMLのJavaScriptのことなのですが。 -
  • すいません。そういう意味なら何も書いてません。試作でbind等も書いたのですが、関連づけれていないようです。どのようなjavascriptを書けばいいのでしょうか? -

回答

自己解決しました。お騒がせいたしました。

一応ソースを書いておきます。

<select name="select-choice-0" id="select-choice-1">
        <option value="http://127.0.0.1:3000/users/1/blogs">Standard:7day</option>
</select>

<script type="text/javascript">
    $("select").bind("change", function(event, ui) {
        var redirectTo = this.value;
        if (redirectTo.length) {
            location.href = redirectTo;
        }
    });
</script>
編集 履歴 (0)
ウォッチ

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