jQuery TypeError: $(...).val(...) 为空答案

【问题标题】：jQuery TypeError: $(...).val(...) is nulljQuery TypeError: $(...).val(...) 为空
【发布时间】：2018-07-04 01:48:03
【问题描述】：

我似乎无法找到我的代码中的缺陷。我将 select2 用于我的选择列表，并且右侧有一个按钮，单击该按钮时会执行以下脚本：

<script type="text/javascript">
function clearBiller() {
    $('#bill_to').val('').trigger('change');
}
</script>

但是当点击时，我收到了引用此脚本的TypeError: $(...).val(...) is null 错误：

<script>
$(document).ready(function(){
    $('#bill_to').on('change', function() {
      if ($(this).val() == '')
      {
        $("#biller").show();
      }
      else
      {
        $("#biller").hide();
      }
    });
    });
</script>

这个问题存在于第二个函数中，我只是不确定如何解决。目前这是表单那部分的html：

<select id="bill_to" name="bill_to" class="js-example-basic-single form-control">
                    @if($shipment->bill_to)
                        <option value="{{$shipment->bill_to}}" selected>3</option>
                    @endif

                    @foreach($cCustomers as $customer)
                        <option value="{{$customer->id}}">{{$customer->customer_name}}</option>
                    @endforeach
                </select>
                <img src="/images/clear.png" height="15px" width="15px" style="margin-left: 5px;" onclick="clearBiller()">
                <div id="existing_biller_details" class="hidden" name="existing_biller_details" style="margin-top:10px;">
                </div>

谁能发现什么？

更新

根据下面对我来说效果最好的建议，我的脚本现在看起来像这样：

    $(document).ready(function() {
        if ($('.js-example-basic-single').val() == "") {
                $('#biller').addClass('hidden');
                $('#existing_biller_details').removeClass('hidden');
        }

        var $eventSelect = $("#bill_to");
            $eventSelect.select2();
            $eventSelect.on("select2:select", function (e) {
          if ($eventSelect.select2().val() == '')
          {
                $('#biller').removeClass('hidden');
              $('#existing_biller_details').addClass('hidden');
                          alert('cleared');
          }
          else
          {
                $('#biller').addClass('hidden');
              $('#existing_biller_details').removeClass('hidden');
              alert('not cleared');
          }
    });

});

上面的警报仅用于指导我解决哪些问题。目前，我加载了已将 ID 为“existing_biller_details”的 div 设置为已隐藏的页面，但如果在 select2 中选择了一个值，则会删除“隐藏”类。

我目前的问题是使用上面的代码，只有“else”才能完全工作。如果我通过最初的“if”语句，它只会执行$('#biller').removeClass('hidden')，然后它就不能再进一步了。我在控制台中没有看到任何错误，但没有出现警报，并且命令 $('#existing_biller_details').addClass('hidden') 也不起作用。

【问题讨论】：

检查 Select2 文档。它有自己的事件。
好吧，这适用于select2，我上面指定的错误是引用第二个函数。
实际上是 $ jQuery，因为它不应该返回 null ....
好的，检查我的答案，但这不会有太大帮助。仍然需要检查 Select2 API。

标签： javascript jquery laravel laravel-5 jquery-select2

【解决方案1】：

您应该直接在#bill_to上触发更改事件

$('#bill_to').val('');
$('#bill_to').trigger('change');

但是您应该检查 Select2 文档，因为当 Select2 初始化并且 Select2 有自己的一组更改事件等时，您的主选择会被隐藏。

【讨论】：

【解决方案2】：

也许对你有帮助

var $eventSelect = $("#bill_to");
    $eventSelect.select2();
    $eventSelect.on("select2:select", function (e) {
          if ($eventSelect.select2().val() == '')
          {
            $("#biller").show();
          }
          else
          {
            $("#biller").hide();
          }
    });

【讨论】：

看我上面的更新（几分钟后），你的效果最好，但我写这篇文章的方式肯定有缺陷。