如何使用基于下拉选择的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

回答

相关问题