作者 主題: 更新下拉選單的問題用AJAX  (閱讀 6862 次)

0 會員 與 1 訪客 正在閱讀本文。

hallohallo

  • 憂鬱的高中生
  • ***
  • 文章數: 134
    • 檢視個人資料
更新下拉選單的問題用AJAX
« 於: 2011-04-28 02:35 »
小弟現在有一個問題就是如何更新下拉選單用AJAX來完成。

程式碼一
selectcolor.php
代碼: [選擇]
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<script>
$(document).ready(function(){

$('.upperchangeColor').change(function(e) {
            var cid = $(this).attr("popupid");
            alert(cid);
});

$('#test1').click(function() {
                        $.ajax({
                        type: "GET",
                        url: "test123.php",
                        success: function(R){
                           $('#table-1').fadeOut(1000, function() {
                        $(this).html(R);
                        $(this).fadeIn(500);
                        });
                        }
                        });
});
});
</script>
</head>
<table border="0px" id="table-1" width="75%"><tr id="upperRow0"> <td style="padding:0px" colspan="3" bgcolor="F0F8FF">
<select class="upperchangeColor" name="upperchangeColor0" id="color0" popupid="0">
                   <option value="default">default</option>
                  <option value="blue">blue</option>
                  <option value="black">black</option>
                  <option value="chocolate">chocolate</option>
                  <option value="darkgreen">darkgreen</option>
                  <option value="firebrick">firebrick</option>
                  <option value="gray">gray</option>
                  <option value="magenta">magenta</option>
                  <option value="olive">olive</option>
                  <option value="purple">purple</option>
                  <option value="red">red</option>
                </select>
               </td></tr></table>
<input type="button" id="test1" value="TEST">
</html>

程式碼二是
test123.php
代碼: [選擇]
<?php
echo <<< UUU
<select class="upperchangeColor" name="upperchangeColor0" id="color0" popupid="0">
                  <option value="default">default</option>
                  <option value="blue">blue</option>
                  <option value="black">black</option>
                  <option value="chocolate">chocolate</option>
                  <option value="darkgreen">darkgreen</option>

                  <option value="firebrick">firebrick</option>
                  <option value="gray">gray</option>
                  <option value="magenta">magenta</option>
                  <option value="olive">olive</option>
                  <option value="purple">purple</option>
                  <option value="red">red</option>

                </select>

UUU;
?>


現在的問題是在還沒按是TEST BUTTON的時候,當我去change下拉選單的時候它會跳出值是0,
但是當我按下TEST BUTTON的時候,我再去change下拉選單的時候它就沒有反應了。
請問這是為什麼的?

TyroneYeh

  • 俺是博士!
  • *****
  • 文章數: 2396
  • 性別: 男
    • 檢視個人資料
回覆: 更新下拉選單的問題用AJAX
« 回覆 #1 於: 2011-04-28 09:14 »
upperchangeColor 的 change 事件要在 ajax success 後從新定義,因為整個 select 都被蓋掉了

建議是 update options 的項目就好,整個 select 事件就要從新定義
--
TyroneYeh

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
回覆: 更新下拉選單的問題用AJAX
« 回覆 #2 於: 2011-04-28 09:15 »
小弟現在有一個問題就是如何更新下拉選單用AJAX來完成。

程式碼一
selectcolor.php
代碼: [選擇]
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<script>
$(document).ready(function(){

$('.upperchangeColor').change(function(e) {
            var cid = $(this).attr("popupid");
            alert(cid);
});

$('#test1').click(function() {
                        $.ajax({
                        type: "GET",
                        url: "test123.php",
                        success: function(R){
                           $('#table-1').fadeOut(1000, function() {
                        $(this).html(R);
                        $(this).fadeIn(500);
                        });
                        }
                        });
});
});
</script>
</head>
<table border="0px" id="table-1" width="75%"><tr id="upperRow0"> <td style="padding:0px" colspan="3" bgcolor="F0F8FF">
<select class="upperchangeColor" name="upperchangeColor0" id="color0" popupid="0">
                   <option value="default">default</option>
                  <option value="blue">blue</option>
                  <option value="black">black</option>
                  <option value="chocolate">chocolate</option>
                  <option value="darkgreen">darkgreen</option>
                  <option value="firebrick">firebrick</option>
                  <option value="gray">gray</option>
                  <option value="magenta">magenta</option>
                  <option value="olive">olive</option>
                  <option value="purple">purple</option>
                  <option value="red">red</option>
                </select>
               </td></tr></table>
<input type="button" id="test1" value="TEST">
</html>

程式碼二是
test123.php
代碼: [選擇]
<?php
echo <<< UUU
<select class="upperchangeColor" name="upperchangeColor0" id="color0" popupid="0">
                  <option value="default">default</option>
                  <option value="blue">blue</option>
                  <option value="black">black</option>
                  <option value="chocolate">chocolate</option>
                  <option value="darkgreen">darkgreen</option>

                  <option value="firebrick">firebrick</option>
                  <option value="gray">gray</option>
                  <option value="magenta">magenta</option>
                  <option value="olive">olive</option>
                  <option value="purple">purple</option>
                  <option value="red">red</option>

                </select>

UUU;
?>


現在的問題是在還沒按是TEST BUTTON的時候,當我去change下拉選單的時候它會跳出值是0,
但是當我按下TEST BUTTON的時候,我再去change下拉選單的時候它就沒有反應了。
請問這是為什麼的?

當 $(this).html(R); 之後, 上面的  $('.upperchangeColor').change(...) 便無效了, 因為原來的物件已經不存在
解決方式:

1. 在 $(this).html(R) 之後再建立一次 change 事件處理器
2.  ajax 只抓回選項部分, 然後取代 select 裡的 html

hallohallo

  • 憂鬱的高中生
  • ***
  • 文章數: 134
    • 檢視個人資料
回覆: 更新下拉選單的問題用AJAX
« 回覆 #3 於: 2011-04-28 12:50 »
謝謝Yamaka的指點。但是可以請你給我一些examples如何用你的解決辦法呢?

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
回覆: 更新下拉選單的問題用AJAX
« 回覆 #4 於: 2011-04-28 16:14 »
但是可以請你給我一些examples如何用你的解決辦法呢?

耶~ 上面已經寫那麼清楚了
而且兩種方式『幾乎』都不需要另外多寫什麼碼
只是修改或是複製原來的碼到適當的地方而已耶
連要改哪裡都點出來了  :D

0x00JYC

  • 懷疑的國中生
  • **
  • 文章數: 32
    • 檢視個人資料
Re: 回覆: 更新下拉選單的問題用AJAX
« 回覆 #5 於: 2011-08-18 12:04 »
加上這個如何

http://api.jquery.com/bind/

$('.upperchangeColor').bind('change', function() {
  //do some thing
});
Hello,World!