在 Select <Option> onCLick 事件中“Ajax 函数”在 Firefox 中工作，但在 Chrome 中不工作答案

【问题标题】：In Select <Option> onCLick Event "Ajax function" Work In Firefox but not in Chrome在 Select <Option> onCLick 事件中“Ajax 函数”在 Firefox 中工作，但在 Chrome 中不工作
【发布时间】：2017-07-16 00:09:49
【问题描述】：

在选项标签onClick 事件在 Firefox 中正常工作，调用 myPurchaseTotal 和 Ajax 工作正常，但在 chrome 中它不起作用。这是查看文件

<select type="text" class="form-control" id="product_id" name="product_id" style="" onchange="copy_data(this.form)">
    <option>Select Product</option>
    @foreach($product as $pro)                                  
        <option onclick="myPurchaseTotal('<?php echo $pro->p_id ?>', 'purchase_total')" value="{{$pro->p_id}}">{{$pro->p_name}}</option>
    @endforeach  
</select>

这是 Ajax 函数

    function myPurchaseTotal(given_text, objID) {
    if (given_text) {
        serverPage = 'purchasetotal/' + given_text;
        xmlhttp.open("GET", serverPage);
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById(objID).innerHTML = xmlhttp.responseText;
            }

        }

    }
    xmlhttp.send(null);
}

【问题讨论】：

说 its not work 并没有给我们太多的工作空间......您在 developer 工具控制台中看到了哪些错误
在 Chrome 中，当我从下拉列表中选择选项时，onClick 事件未命中所以首先我需要在 chrome 中点击 onClick 事件。
这是正确的，因为您的函数已定义
我认为最好在选择输入中添加一个 onchange 事件。
是的，它更好。你能给我 ajax 代码中的 jquery ajax 函数示例和响应文本吗？我认为这个 ajax 代码不适合这种情况我需要另一种类型的 ajax 代码。

标签： javascript php jquery ajax laravel-5

【解决方案1】：

问题终于解决了。我更改了 My Ajax Code 并使用 Select Id。

$('#product_id').on('change', function() {               
            if ($("#product_id").val() != "") {                                
                $.ajax({
                    url: '/xcommerce/public/purchastotal/'+$(this).val(),
                    type: 'GET',
                    success: function (response){                      
                        $("#purchase_total").replaceWith(response);
                    },
                    error: function (xhr) {
                        alert("Something went wrong, please try again");
                    }
                });
            }

        });

【讨论】：

【解决方案2】：

我认为最好使用 select 元素中的 onchange 事件来处理这类事情，并且更能跨浏览器兼容。

下面是一个示例，说明如何使用当前函数来实现。只需替换它们并为选择选项添加 foreach。

https://jsbin.com/pagokavava/edit?html,console,output

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <select id="product_id" name="product_id" onchange="productIDOnChangeHandler(this)">
    <option value="pid_1">Product 1</option>
    <option value="pid_2">Product 2</option>
    <option value="pid_3">Product 3</option>
    <option value="pid_4">Product 4</option>
  </select>

  <script>
    function productIDOnChangeHandler(t) {
      copy_data(t.form);
      var select = document.getElementById('product_id');
      var index = select.selectedIndex;
      var given_text = select.options[index].value;
      myPurchaseTotal(given_text, 'purchase_total');
    }

    function copy_data(form) {
      // Your fn
      console.log(form);
    }

    function myPurchaseTotal(given_text, objId) {
      // Your fn
      console.log(given_text);
    }
  </script>
</body>
</html>

您将在 JSBin 上获得 null 是因为选择不在表单中。

如果您想使用 jQuery 或 ajax 部分的东西来实现，您的脚本也将更加跨浏览器兼容。

【讨论】：