阿贾克斯jQuery 组合框

发布于 2024-11-01 01:18:06 字数 1305 浏览 1 评论 0原文

今天我意识到当一个组合框可以控制第二个组合框的数据时,这是非常有用的。我的问题->我以前从未使用过 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

七度光 2024-11-08 01:18:06

我看到的一个问题是,在您的测试页面中,您没有在 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 be woonplaats: 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 to woonplaats 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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文