Question

所以基本上我正在尝试创建一个页面，用户可以从两个下拉菜单中选择选项，当第二个下拉菜单已经完成并且两者都有选项时，我希望它能触发一些带有这些值的javascript然后根据输出返回文本。

E.g。一个用户选择xbox和舒适交易，价格返回为5英镑，或者他们可能选择PlayStation和舒适交易，价格返回2.50英镑，或者他们希望PC和玩家拍卖的价格仅为0.99英镑。

HTML

<select id="platform" name="platform">
    <option select value=""></option>
    <option value="xbox">Xbox</option>
    <option value="playstation">PlayStation</option>
    <option value="pc">PC</option>
</select><br>
<p>Select Method:</p>
<select id="method" name="method" onChange="price()">
    <option selected value=""></option>
    <option value="comfortTrade">Comfort Trade</option>
    <option value="playerAuction">Player Auction</option>
</select><br>
<h3 id="price"></h3>

的Javascript

function price() {
    if ($(document.getElementById("platform")) === "xbox" && $(document.getElementById("method")) === "comfortTrade") {
        document.getElementById("price").innerHTML = "£5";
    } else if ($(document.getElementById("platform")) === "playstation" && $(document.getElementById("method")) === "comfortTrade") {
        document.getElementById("price").innerHTML = "£2.50";
    }
}

我对Javascript很陌生，但我还是去做了这个，我也花了大约一个小时左右尝试搜索这方面的教程，但没有任何工作。

Answer 1

需要在现有代码中更新一些内容才能使其正常工作：

1）onchange没有大写字母，需要添加到＆＃34; platform＆＃34; <select>以及

2）此处不需要$，只需使用document.getElementById

即可

3）在步骤2中选择元素后，需要通过访问元素上的属性.value来获取select的值。

固定代码：

<div id="app">
  <select id="platform" name="platform" onchange="price()">
    <option select value=""></option>
    <option value="xbox">Xbox</option>
    <option value="playstation">PlayStation</option>
    <option value="pc">PC</option>
  </select><br>
  <p>Select Method:</p>
  <select id="method" name="method" onchange="price()">
    <option selected value=""></option>
    <option value="comfortTrade">Comfort Trade</option>
    <option value="playerAuction">Player Auction</option>
  </select><br>
  <h3 id="price"></h3>
</div>

<script>
  function price() {
    if(document.getElementById("platform").value === "xbox" && document.getElementById("method").value === "comfortTrade") {
document.getElementById("price").innerHTML = "£5";
    } else if(document.getElementById("platform").value === "playstation" && document.getElementById("method").value === "comfortTrade") {
document.getElementById("price").innerHTML = "£2.50";
    } 
  }
</script>

Answer 2

试试这个javascript函数：

function price() {
    if (document.getElementById("platform").value == "xbox" && document.getElementById("method").value == "comfortTrade") {
        document.getElementById("price").innerHTML = "£5";
    } else if (document.getElementById("platform").value == "playstation" && document.getElementById("method").value == "comfortTrade") {
        document.getElementById("price").innerHTML = "£2.50";
    }
}

Answer 3

假设你安装了jQuery，因为你在代码中使用$(...)，你可以像这样解决你的问题：

    <select id="platform" name="platform" onchange="findPrice()">
        <option select value=""></option>
        <option value="xbox">Xbox</option>
        <option value="playstation">PlayStation</option>
        <option value="pc">PC</option>
    </select><br>
    <p>Select Method:</p>
    <select id="method" name="method" onchange="findPrice()">
        <option selected value=""></option>
        <option value="comfortTrade">Comfort Trade</option>
        <option value="playerAuction">Player Auction</option>
    </select><br>
    <h3 id="price"></h3>
<script type="application/javascript">
window.findPrice = function() {
    if($("#platform").val() === "xbox" && $("#method").val() === "comfortTrade") {
    document.getElementById("price").innerHTML = "£5";
    }else if($("#platform").val() === "playstation" && $("#method").val() === "comfortTrade") {
    document.getElementById("price").innerHTML = "£2.50";
    }
}
</script>

您可以在https://jsfiddle.net/L2vgqmtL/

上看到相关的工作示例

但是，我实际上会提出一个稍微不同的解决方案，我发现它更优雅：

<script type="application/javascript">
window.findPrice = function() {
  var platform = $("#platform").val();
  var method = $("#method").val();
  var priceUpdateText = "";
    if(method == 'comfortTrade'){
    switch(platform){
        case "xbox":
        priceUpdateText = "£5";
        break;
      case "playstation":
        priceUpdateText = "£2.50";
        break;
      default:
        priceUpdateText = "";
    }
  }
  $("#price").text(priceUpdateText);
}
</script>
            <select id="platform" name="platform" onchange="findPrice()">
        <option select value=""></option>
        <option value="xbox">Xbox</option>
        <option value="playstation">PlayStation</option>
        <option value="pc">PC</option>
    </select><br>
    <p>Select Method:</p>
    <select id="method" name="method" onchange="findPrice()">
        <option selected value=""></option>
        <option value="comfortTrade">Comfort Trade</option>
        <option value="playerAuction">Player Auction</option>
    </select><br>
    <h3 id="price"></h3>

此处提供了此解决方案的工作示例：https://jsfiddle.net/8wafskbw/2/

重要提示： 这两种解决方案都在您的网页中包含jQuery的假设下运行。

根据两个下拉菜单

3 个答案: