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>

来源

2013-02-15 Ricky Mason

您可以查看下面的例子。

触发更改事件时，所选值将显示在警告框内。

<!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-15 21:07:23

aha。很简单。我应该想出jquery会允许我使用select的名字。谢谢 – 2013-02-15 21:10:57

不客气:) – 2013-02-15 21:11:31

jquery mobile - 选择选项，使用ajax更新html结果

回答

相关问题