Question

我正在做一个项目。我做了一些设计。我采取了一种形式，在这种形式，我已经采取了一些信息，如姓名，地址，phno等。最后我采取了国家，州和城市。

我想要做的是，如果我选择国家，那么它将自动显示该国家的相应国家，在选择州后，它将自动显示该州的相应城市。

我见过一个网站，他们就是这样做的。（工作正常）

如果您想查看，请检查http://jsfiddle.net/fRuhn/881/

我在Macromedia Dreamweaver 8中做的一样，但我没有得到输出

编码我已经完成了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>

    <script type="text/javascript">
        $("#select1").change(function () {
            if ($(this).data('options') == undefined) {
                /*Taking an array of all options-2 and kind of embedding it on the select1*/
                $(this).data('options', $('#select2 option').clone());
            }
            var id = $(this).val();
            var options = $(this).data('options').filter('[value=' + id + ']');
            $('#select2').html(options);
        });
    </script>
</head>

<body>
    <select name="select1" id="select1" onchange="change();">
        <option value="1">Fruit</option>
        <option value="2">Animal</option>
        <option value="3">Bird</option>
        <option value="4">Car</option>
    </select>

    <select name="select2" id="select2">
        <option value="1">Banana</option>
        <option value="1">Apple</option>
        <option value="1">Orange</option>
        <option value="2">Wolf</option>
        <option value="2">Fox</option>
        <option value="2">Bear</option>
        <option value="3">Eagle</option>
        <option value="3">Hawk</option>
        <option value="4">BWM
            <option>
    </select>
</body>

有人可以帮我解决这个问题吗？

我的问题是如果我选择水果然后它没有显示水果项目，它显示所有项目。

我的编码问题是我无法调用jquery函数，如何从select标签中调用它？

感谢所有人。比奈

Answer 1

您尚未包含jQuery库。

在第一个jQuery函数上面的<head>中添加它：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

就像@ dwhite.me所说，你的代码中没有包含jquery。包括它。你也应该把代码包装成dom准备好了。当没有标识为#select1

的元素时，将执行其他明智的脚本

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#select1").change(function () {
                if ($(this).data('options') == undefined) {
                    /*Taking an array of all options-2 and kind of embedding it on the select1*/
                    $(this).data('options', $('#select2 option').clone());
                }
                var id = $(this).val();
                var options = $(this).data('options').filter('[value=' + id + ']');
                $('#select2').html(options);
            });
        });
    </script>
</head>

<body>
    <select name="select1" id="select1" onchange="change();">
        <option value="1">Fruit</option>
        <option value="2">Animal</option>
        <option value="3">Bird</option>
        <option value="4">Car</option>
    </select>

    <select name="select2" id="select2">
        <option value="1">Banana</option>
        <option value="1">Apple</option>
        <option value="1">Orange</option>
        <option value="2">Wolf</option>
        <option value="2">Fox</option>
        <option value="2">Bear</option>
        <option value="3">Eagle</option>
        <option value="3">Hawk</option>
        <option value="4">BWM
            <option>
    </select>
</body>

无法在jquery和html之间进行链接

2 个答案: