2013-02-15 111 views
0

我正在使用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> 

回答

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> 

我希望這有助於。

+0

aha。很簡單。我應該想出jquery會允許我使用select的名字。謝謝 – 2013-02-15 21:10:57

+0

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