0

私はjquerymobileの複数選択を使用しています：ユーザーの選択に基づいてデータをフィルタリングしようとするカスタム。

オプションを選択すると選択メニューのテキストが自動的に変更されるため、jquerymobileはすでにSELECTでテキストを更新していることがわかります。

選択したオプションの値をAJAXを介してphpページに送信し、JSONを介して結果を返すことができるように、それを利用する方法はありますか？

<form id="target" method="post">
<div data-role="fieldcontain">
<label for="select-choice-attunement" class="select ui-hidden-accessible">Filter Attunement</label>
<select data-mini="true" name="select-choice-attunement" id="select-choice-attunement" multiple="multiple" data-native-menu="false">
    <option>Filter by Element</option>
    <option value='1'>fire</option>
    <option value='2'>water</option>
    <option value='3'>earth</option>
    <option value='4'>light</option>
    <option value='5'>darkness</option>
</select>
</div>
</form>

もう少し明確にするため。

上記のリストから、選択肢は5つしかないことがわかります。ユーザーは1つ、または5つすべての後で終了する可能性があります。結果は、選択したものを反映する必要があります。できればできるだけ早く（これが、jquery mobiles updateにフックしたい理由です）。したがって、「fire」を選択すると、呼び出されたphp関数を介してすぐにフィルタリングされ、必要なリスト項目であるjsonリストが返されます。

リストアイテムの新しい配列で以下を更新したいと想像してみましょう。

意見：

<div id='change_with_ajax'>
<ul>
<?php
foreach ($ajaxretrievedarray as $array) 
{
echo "<li>".$array['name']."</li>";
} ?>
</ul>
</div>
4

1 に答える 1

2

以下の例を確認してください。

変更イベントがトリガーされると、選択された値が警告ボックス内に表示されます。

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Select Choice</title> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

        <script>
            $(document).on('change', '#select-choice-attunement', function(e){
                alert($(this).val());
            });
        </script>
    </head>

    <body>
        <!-- /page -->
        <div data-role="page">
            <!-- /header -->
            <div data-role="header" data-theme="b">
                <h1>Select Choice</h1>
            </div>
            <!-- /content -->
            <div data-role="content">
                <div data-role="fieldcontain">
                    <label for="select-choice-attunement" class="select ui-hidden-accessible">Filter Attunement</label>
                    <select data-mini="true" name="select-choice-attunement" id="select-choice-attunement" multiple="multiple" data-native-menu="false">
                        <option>Filter by Element</option>
                        <option value='1'>fire</option>
                        <option value='2'>water</option>
                        <option value='3'>earth</option>
                        <option value='4'>light</option>
                        <option value='5'>darkness</option>
                    </select>
                </div>
             </div>
        </div>
    </body>
</html>

これが役立つことを願っています。

于 2013-02-15T21:07:23.867 に答える