Question

有问题的JSFiddle似乎没有问题：http://jsfiddle.net/S3LF3/（如果您输入像google.com这样的网址，它会选择“.com”的值或者您点后的任何内容，它会在列表）

然而jQuery函数似乎有问题？

在Chrome中我收到此错误：

Uncaught TypeError: $(...).ready(...) is not a function

这是我的代码：

<html>
<head>
    <title>Add Site</title>

    <script src="js/jquery-3.1.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/msdropdown/dd.css" />
    <script src="js/msdropdown/jquery.dd.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/msdropdown/flags.css" />
</head>
<body>
<h1>Add new site</h1>
<div class="contentbox">
<form method="post">
        <input type="hidden" name="addsite" value="true"/>
            <p>
            <label for="site_url">Site url:</label>
            <input type="text" name="site_url" id="urlText" placeholder="domain.xxx" value=""/>
        </p>
        <p>
        <label for="site_url">Search locale:</label>
        <select name="locale" id="locale">
            <option value="">
              Select locale
            </option>
             <optgroup label="Popular">
<option value=".dk" data-image="images/msdropdown/icons/blank.gif" data-imagecss="flag dk" data-title="Denmark">Denmark - Danish</option>
                                                                                <option value=".de" data-image="images/msdropdown/icons/blank.gif" data-imagecss="flag de" data-title="Germany">Germany - German</option>
  <option value=".au" data-image="images/msdropdown/icons/blank.gif" data-imagecss="flag au" data-title="Australia">Australia - English</option>

  </optgroup>
            </select>
          </p>

        <p>
            <label for="site_url"></label>
            <input type="submit" name="submit"  class="btn" value="Add">
        </p>


</form>
</div>


</body>
</html>

<script>
$(document).ready(function() {
$("#locale").msDropdown();
})


(function ($) {
    $('#urlText').on('change', function () {
        var value = this.value,
            parts = this.value.split('.'),
            str, $opt;
        for (var i = 0; i < parts.length; i++) {
            str = '.' + parts.slice(i).join('.');
            $opt = $('#locale option[value="' + str + '"]');
            if ($opt.length) {
                $opt.prop('selected', true);
                break;
            }
        }
    })
})(jQuery);
</script>

我想要做的是当用户输入网址时，例如“google.dk”，它应该从下拉列表中选择“.dk”的值。

Answer 1

我玩了你的代码并发现了，它是$（document）.ready（）;

末尾缺少的分号

    $(document).ready(function() {
         $("#locale").msDropdown();
    });

只需在内置编辑器中尝试：

＆＃13;

<html>
<head>
    <title>Add Site</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/msdropdown/dd.css" />
    <script src="js/msdropdown/jquery.dd.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/msdropdown/flags.css" />
</head>
<body>
<h1>Add new site</h1>
<div class="contentbox">
<form method="post">
        <input type="hidden" name="addsite" value="true"/>
            <p>
            <label for="site_url">Site url:</label>
            <input type="text" name="site_url" id="urlText" placeholder="domain.xxx" value=""/>
        </p>
        <p>
        <label for="site_url">Search locale:</label>
        <select name="locale" id="locale">
            <option value="">
              Select locale
            </option>
             <optgroup label="Popular">
<option value=".dk" data-image="images/msdropdown/icons/blank.gif" data-imagecss="flag dk" data-title="Denmark">Denmark - Danish</option>
                                                                                <option value=".de" data-image="images/msdropdown/icons/blank.gif" data-imagecss="flag de" data-title="Germany">Germany - German</option>
  <option value=".au" data-image="images/msdropdown/icons/blank.gif" data-imagecss="flag au" data-title="Australia">Australia - English</option>

  </optgroup>
            </select>
          </p>

        <p>
            <label for="site_url"></label>
            <input type="submit" name="submit"  class="btn" value="Add">
        </p>


</form>
</div>


</body>
</html>

<script>
$(document).ready(function() {
//$("#locale").msDropdown();
});


(function ($) {
    $('#urlText').on('change', function () {
        var value = this.value,
            parts = this.value.split('.'),
            str, $opt;
        for (var i = 0; i < parts.length; i++) {
            str = '.' + parts.slice(i).join('.');
            $opt = $('#locale option[value="' + str + '"]');
            if ($opt.length) {
                $opt.prop('selected', true);
                break;
            }
        }
    })
})(jQuery);
</script>

＆＃13;

Answer 2

JSFiddle工作正常的原因是它实际上并没有使用你找到的country flag下拉菜单插件。插件的工作方式与标准<select> html标记的工作方式不同。

我查看了jquery.dd.js文件，似乎无法使用javascript与下拉菜单进行交互。因此，您的行$opt.prop('selected', true);对于实际下拉菜单（<select>标记）有效，但不适用于插件的下拉菜单，后者以不同方式处理所选状态。此外，该插件提供的文档很少，代码中几乎没有任何注释，因此很难知道插件是如何工作的。

我可以看到2个问题的解决方案：

您可以尝试了解jquery.dd.js文件中的插件代码，并尝试实现一种方法来告诉插件您要选择哪个元素。我通常不会建议编辑第三方插件，但由于自2012年以来您获得插件的网站尚未更新，因此该插件将来几乎没有机会接收更新，因此编辑它将是安全的案件。但是，它需要jQuery插件制作方面的一些知识。
您可以尝试找到另一个国家/地区标记下拉插件，可以使用javascript更新，而不是仅使用鼠标。这些项目可以在Github上找到（这里有一些在Github上找到的结果：Country flag drop down menu results on Github）。

以前的信息：

从您提供的代码中，您在调用$(document).ready()函数后缺少分号。它应该是这样的：

$(document).ready(function() {
    $("#locale").msDropdown();
}); // <--- This semi-colon is missing

此外，(function ($) {// code} )(jQuery);中的代码可能会在>文档准备好之前执行，这意味着此代码有时可能无效。尝试将此代码放入$(document).ready();匿名函数中。这样，您将确保jQuery可以访问所有html节点。

最后，您应该考虑将您的javascript逻辑放在<html>标记内（<head>内，<body>之后或</body>之前）。虽然在<script>标记之后放置</html>标记可能起作用，但这远非有效的html，可能是您遇到的一些问题的原因。最好的方法是将您的javascript放在.js文件中，并将其链接到<head>中，就像链接jQuery和msdropdown一样：

<head>  <script src="js/main-logic.js"></script> </head>

Answer 3

JQuery快捷方式 - $（） - 似乎被其他库重写了我的猜测。

尝试使用：

jQuery( document ).ready(function( $ ) {
  // Code that uses jQuery's $ can follow here.
});

未捕获的TypeError：$（...）。ready（...）不是函数，即使它适用于JsFiddle

3 个答案: