0

我正在使用 jquery mobile 的多重选择：自定义来尝试帮助根据用户的选择过滤数据。

我可以看到 jquery mobile 已经在 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 更新的原因）。因此，如果选择“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 回答