javascript - 代码在结果中工作但在博客中不起作用

Question

我正在使用jquery chosen实际上，我想实现如下图所示的结果，因为它在代码片段中显示的结果中运行良好。但是当我在我的 blog 中上传相同的代码时这是在博客中运行的，它不起作用。我所做的一切都是正确的。下面是我在堆栈片段结果中实现的图像，但不在我的博客中实现。

$(".chosen-select").chosen();
$(".chosen-select").bind('chosen:hiding_dropdown', function(e, i) {
  searched_value = i.chosen.get_search_text();
  firstElementOnDropdown = i.chosen.search_results.find('li.active-result').first()
  if (firstElementOnDropdown.text().toLowerCase() == searched_value.toLowerCase()) {
    firstElementOnDropdown.trigger('mouseup');
    var t = i;
    setTimeout(function() {
      t.chosen.input_blur();
    }, 150);
  }
});

<link rel="stylesheet" href="http://harvesthq.github.io/chosen/chosen.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="http://harvesthq.github.io/chosen/chosen.jquery.js" type="text/javascript"></script>
<div>
  <em>Multiple Select with Groups</em><br>
  <select data-placeholder="Your Favorite Football Team" style="width:350px;" class="chosen-select" multiple tabindex="6">
    <option value=""></option>
    <optgroup label="NFC EAST">
      <option>Dallas Cowboys</option>
      <option>New York Giants</option>
      <option>Philadelphia Eagles</option>
      <option>Washington Redskins</option>
    </optgroup>
   
 
    
  </select>
</div>

我在我的博客中实现了下面的代码

<link rel="stylesheet" href="http://harvesthq.github.io/chosen/chosen.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="http://harvesthq.github.io/chosen/chosen.jquery.js" type="text/javascript"></script>
<div>
  <em>Multiple Select with Groups</em><br />
  <select data-placeholder="Your Favorite Football Team" style="width:350px;" class="chosen-select" multiple tabindex="6">
    <option value="" />
    <optgroup label="NFC EAST">
      <option />Dallas Cowboys
      <option />New York Giants
      <option />Philadelphia Eagles
      <option />Washington Redskins
    </optgroup>



  </select>
</div>


<script type="text/javascript">
$(".chosen-select").chosen();
$(".chosen-select").bind('chosen:hiding_dropdown', function(e, i) {
  searched_value = i.chosen.get_search_text();
  firstElementOnDropdown = i.chosen.search_results.find('li.active-result').first()
  if (firstElementOnDropdown.text().toLowerCase() == searched_value.toLowerCase()) {
    firstElementOnDropdown.trigger('mouseup');
    var t = i;
    setTimeout(function() {
      t.chosen.input_blur();
    }, 150);
  }
});
</script>

当我打开博客时，我发现控制台中出现 2 个错误。下面是该图像

Answer 1

经过一些调试，我看到你的 if 语句:

if (firstElementOnDropdown.text().toLowerCase() == searched_value.toLowerCase())

返回 false。快速解决方法是:

if (firstElementOnDropdown.text().toLowerCase().trim() == searched_value.toLowerCase().trim())

因为有空格导致 if 子句出错。 如果不需要的话，使用 trim 函数删除字符串中的前导和尾随空格是一种很好的技术。

<script type="text/javascript">
$(".chosen-select").chosen();
$(".chosen-select").bind('chosen:hiding_dropdown', function(e, i) {
  searched_value = i.chosen.get_search_text();
  firstElementOnDropdown = i.chosen.search_results.find('li.active-result').first()
  if (firstElementOnDropdown.text().toLowerCase().trim() == searched_value.toLowerCase().trim()) {
    firstElementOnDropdown.trigger('mouseup');
    var t = i;
    setTimeout(function() {
      t.chosen.input_blur();
    }, 150);
  }
});
</script>