jquery mobile - 选择选项,使用ajax更新html结果
问题描述:
我正在使用jquery mobile的多重选择:自定义尝试并帮助根据用户的选择筛选数据。jquery mobile - 选择选项,使用ajax更新html结果
我可以看到,jQuery的手机已经更新文本ON 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手机更新)。所以如果选择'fire',它将立即通过被调用的php函数进行过滤并返回json列表,这是必需的列表项。
让我们想象一下,我想更新的列表项的新数组如下:
查看:
<div id='change_with_ajax'>
<ul>
<?php
foreach ($ajaxretrievedarray as $array)
{
echo "<li>".$array['name']."</li>";
} ?>
</ul>
</div>
答
您可以查看下面的例子。
触发更改事件时,所选值将显示在警告框内。
<!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>
我希望这有助于。
aha。很简单。我应该想出jquery会允许我使用select的名字。谢谢 – 2013-02-15 21:10:57
不客气:) – 2013-02-15 21:11:31