Question

我有一些电子商务网站的代码正在开发，当用户登陆产品详细信息页面时，他们可以选择服装尺寸。选择尺寸后，它会显示价格以及是否有库存。这是由选择菜单上的onchange事件触发的。

当页面加载自动选择的第一个尺寸但不显示内容，即价格和库存水平。无论如何我可以在页面加载时显示这些信息吗？任何帮助非常感谢。

function showProducts(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else {
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
            }
        };
        xmlhttp.open("GET","<?php echo ROOT; ?>ExtraProducts.php?q="+str,true);
        xmlhttp.send();
    }
}

Answer 1

您需要在dom has loaded时调用该方法。一个简单的方法是将脚本和调用放在正文的最后。同时稍微更改方法以检索selectedvalue本身，这样您就不必将值传递给函数：

function showProducts() {
  var s = document.getElementById("sizeSelect");
  var str = s.options[s.selectedIndex].value;
  console.log(str);
  /* Your old code here... */
}

showProducts();

<select onchange="showProducts();" id="sizeSelect">
  <option value="1">First</option>
  <option value="2" selected>Second</option>
</select>

Ajax - 表单选择onchange和窗口加载

1 个答案: