阿贾克斯jQuery 组合框
今天我意识到当一个组合框可以控制第二个组合框的数据时,这是非常有用的。我的问题->我以前从未使用过 Ajax。
目前正在处理以下网页: http://194.247.30.66/~keizer/?ond=woningen< /a>
尝试使用左侧的组合框。
我的一般问题:我讨厌提交按钮,我讨厌默认外观,如何使用 Ajax 来处理第二个组合框的数据? 例如:第一个组合框包含城市列表。当我选择一个城市时,它应该自动更改组合框 2 的数据(包含带有房屋类别的列表)。
当我在第一个框中选择 Echt 时,它不应该让 box2 显示一些不在我的数据库中的数据。
请帮助这个没有头脑的菜鸟。
我得到的数据:
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery.selectbox-0.1.2.js"></script>
<script type="text/javascript">
$(function () {
$("#woonplaats").selectbox();
$("#pandtype").selectbox();
$("#vraagprijs_vanaf").selectbox();
$("#vraagprijs_tot").selectbox();
jQuery(function(){
jQuery('ul.sf-menu').superfish();
});
$("#woonplaats").selectbox({
onChange: function (val, inst) {
$.ajax({
type: "GET",
data: {country_id: val},
url: "ajax.php",
success: function (data) {
$("#boxCity").html(data);
$("#city_id").selectbox();
}
});
},
effect: "slide"
});
});
</script>
Today I realised it's pretty usefull when one combobox can control the data of the second combobox. My problem -> I've never worked with Ajax before.
Currently working on the following webpage: http://194.247.30.66/~keizer/?ond=woningen
Try to use the comboboxes on the left.
My general question: I hate submit buttons, I hate a default look, how can I use Ajax to handle the data of the second combobox?
For example: The first combobox contains a list of city's. When I select a city, it should automaticly change the data of combobox 2 (contains a list with housecategories).
When I select Echt in the first box, it SHOULDN'T let box2 show me some data wich ain't in my database.
Help this mindless noob please.
Data i've got:
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery.selectbox-0.1.2.js"></script>
<script type="text/javascript">
$(function () {
$("#woonplaats").selectbox();
$("#pandtype").selectbox();
$("#vraagprijs_vanaf").selectbox();
$("#vraagprijs_tot").selectbox();
jQuery(function(){
jQuery('ul.sf-menu').superfish();
});
$("#woonplaats").selectbox({
onChange: function (val, inst) {
$.ajax({
type: "GET",
data: {country_id: val},
url: "ajax.php",
success: function (data) {
$("#boxCity").html(data);
$("#city_id").selectbox();
}
});
},
effect: "slide"
});
});
</script>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我看到的一个问题是,在您的测试页面中,您没有在 javascript 中使用
#woonplaats
,而是使用页面中不存在的#country_id
。在您发布的代码中,问题已部分解决,尽管您仍然有
country_id: val
,我猜应该是woonplaats: val
(请注意,我不熟悉选择框插件及其语法)。
编辑:我首先将对
country_id
的所有引用更改为woonplaats
并修复html中的错误可能会导致意想不到的结果。firebug 中的控制台在第 27 行给了我一个 javascript 错误(有效地停止了所有进一步处理...)(jQuery("ul.sf-menu").superfish 不是一个函数 http://194.247.30.66/~keizer/?ond=woningen 第 27 行)
firefox 的 HTML 验证器给了我 93 条警告,主要是关于意外的警告开始和结束标签。
One problem I see is that in your test page you are not using
#woonplaats
in the javascript but#country_id
which does not exist in your page.In the code you posted, the problem is partly solved although you still have
country_id: val
which I guess should bewoonplaats: val
(note that I´m not familiar with the selectbox plugin and its syntax).
Edit: I would start with changing all references to
country_id
towoonplaats
and fix the errors in the html as that might lead to unexpected results.The console in firebug gives me a javascript error (effectively halting all further processing...) on line 27 (jQuery("ul.sf-menu").superfish is not a function http://194.247.30.66/~keizer/?ond=woningen Line 27)
HTML validator for firefox gives me 93 warnings, mainly about unexpected opening and closing tags.