jQuery 类型错误：$(...).val(...) 为空。

Question

我似乎找不到我的代码中的错误。我正在使用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中选择一个值，则会删除“hidden”类。

我目前的问题是，使用上述代码，只有“else”完全起作用。如果我经过最初的“if”语句，它只会执行$('#biller').removeClass('hidden')，然后就无法继续执行了。我在控制台中没有看到任何错误，但是没有警报弹出，也不能执行$('#existing_biller_details').addClass('hidden')命令。

- Matthew

---

请查看Select2文档。它有自己的事件。 - Ravenous

这对于select2有效，我上面指定的错误是指第二个函数。 - Matthew

$ 实际上是 jQuery 吗？因为它不应该返回 null... - epascarello

好的，请检查我的答案，但它并没有太大帮助。仍需要检查Select2 API。 - Ravenous

Answer 1

也许这可以帮助您。

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

- Ilya Yaremchuk

---

请看我上面的更新（几分钟前），你的方法是最好的，但我写这个还有缺陷。 - Matthew

Answer 2

你应该直接触发 #bill_to 的 change 事件

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

但是你应该查看Select2文档，因为当Select2被初始化时，你的主要选择会被隐藏，并且Select2有自己的一组事件来进行更改等操作。

- Ravenous