如何使用基於下拉選擇的jquery更新div

我有一個包含3個值的下拉菜單。每個都有一個option ID。我想創建一個ajax請求並根據該請求的響應更新div。如何使用基於下拉選擇的jquery更新div

我有jsbin中的示例代碼，我試圖向imdb發出ajax請求。我不想解析imdb的響應，但希望有人向我展示如何根據imdb的響應更新div。這只是一個示例，因爲我試圖在我的應用程序中實現類似這樣的事情......唯一的區別是，不是對imdb進行回調，而是將回調函數應用於我的應用程序。

請參閱example

來源

2010-08-03 learn_plsql

你的應用程序將返回什麼？ HTML或JSON或其他類型的數據？由於同源策略，您無法調用imdb。 – 2010-08-03 18:54:51

這將是HTML – 2010-08-03 18:55:11

是這樣的：

$('select').change(function() { 
    $('#yourdiv').load('to/your/page', {value: $(this).val()}); 
});

這將發送GET請求（to/your/page?value=theSelectValue）的select元件的變化每當值與負載ID yourdiv在div的響應。

當然，您必須調整選擇器和參數名稱。

如果你想使一個POST請求，您可以使用$.post()函數回調：

$('select').change(function() { 
    $.post('to/your/page', {value: $(this).val()}, function(data) { 
     $('#yourdiv').html(data); 
    }); 
});

參考：.change()，.val()，.load()，$.post()

來源

2010-08-03 18:56:36

我覺得好像你偷了我的答案。 :-( – Chris 2010-08-03 21:06:28

首先，你會想要查看http://code.google.com/p/imdb-api/或另一個API實現來訪問IMDB信息。與實際在IMDB上查找頁面並解析html結果相比，這是一個更好的方法。

這就是你如何能夠把你的選擇，並請求您的服務器使用的IMDB API來查找影片信息：

<script> 
$(document).ready(function(){ 
    $("#drop-down").change(function(){ 
    $.ajax({ 
     type: "POST", 
     url: "serverCodeToGetIMDBLookup.php", 
     data: "movie="+$("#drop-down").val(), 
     success: function(msg){ 
     //process return msg here with movie information 
     } 
    }); 
    }); 
}); 
</script>

如果只是得到一個IMDB頁：

$("#drop-down").change(function(){  
    $('#result').load('someIMDBPage.html', function() { 
    alert('Load was performed.'); 
    }); 
});

來源

2010-08-03 18:56:44 Chris

）Thanks，so'success'就是我寫'$（'＃my_div'）。html（msg）;' – 2010-08-03 19:02:36

@learn_plsql：不，這已經由'load（）'處理過了：* load *（'＃my_div'）。load（'someIMDBPage.html'）' – 2010-08-03 19:04:22

爲什麼不使用jQuery中的.ajax方法？這裏的例子：


$.ajax({ 
     type: "POST", 
     url: "YOUR_URL", 
     data: { query: $('input#query').val() }, //this is example only 
     ontentType: "application/json; charset=utf-8", 
     dataType: "json", //you can change to html 
     success: function(result) { $('#div_id').html(result)}, 
     error: function(xhr, ajaxOptions, throwError) { 
      alert(throwError); 
     } 
    });

來源

2010-08-03 18:57:35 Ventus

用戶jQuery的load

如。

$("#drop-down").change(function(){ 
    $('#result').load('http://www.imdb.com/title/' + this.id + '/'); 
});

來源

2010-08-03 18:57:37

'this.id'會給出'drop-down'的數據，並將返回的HTML放到匹配的元素中* 「......這是你的意思嗎？」 – 2010-08-03 19:07:00

大聲笑！不，沒有注意到，但是這個問題中引用的例子......用它來看起來很熟悉。 – 2010-08-03 19:44:17

如何使用基於下拉選擇的jquery更新div

回答

相關問題