jQuery TypeError:$(...)。val(...)为null

时间:2018-01-24 21:52:17

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

我似乎无法找到代码中的缺陷。我正在使用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');
          }
    });

});

上面的警告只是指导我进行的工作。目前,我加载了我已经设置div的页面,其id为“existing_biller_details”已经被隐藏,但是如果在select2中选择了一个值,则会删除“hidden”类。

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

2 个答案:

答案 0 :(得分:2)

可能对此有所帮助

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

答案 1 :(得分:0)

您应该直接在#bill_to

上触发更改事件
$('#bill_to').val('');
$('#bill_to').trigger('change');

但是你应该检查Select2文档,因为当初始化Select2时你的主选择被隐藏,而Select2有自己的一组事件可以改变等等。