如何使用JavaScript / JQuery獲取下拉列表的選定值

Question

我是JavaScript的新手，需要一些幫助，但是我一直無法找到解決該問題的方法，如果可以的話，我們將不勝感激。 我提前謝謝你。

好的，我有兩個下拉列表，我想做的是創建一個函數，該函數將允許我根據所選選項的組合打印出一個值。 例如，如果在下拉菜單中選擇了“ iPhone”，而在下拉菜單中選擇了“按鈕”，則它將在文本框中顯示該維修的費用。

 <select name="phones">
<option value="iphone">iphone</option>
<option value="blackberry">blackberry</option>
<option value="HTC">HTC</option>
<option value="Samsung">Samsung</option>
</select>

<select name="repair">
<option value="button">button</option>
<option value="battery">batter</option>
<option value="screen">screen</option>
<option value="back">back</option>
</select>

因此，可以說我選擇了iphone，然后顯示了一個值，但是如果我選擇了黑莓，則顯示了一個不同的值，我嘗試了事件偵聽器，並嘗試使用按鈕進行了此操作，但是我似乎無法獲取代碼對的，請您幫忙。

謝謝

Answer 1

這樣的事情應該可以解決問題。

// Listens for change on either select. You might 
// want to get more specific than 'select' if your 
// page has more elements on it.
$('select').on('change', function(e){

  // Get the value of both elements
  var phones = $('select[name="phones"]').val(); // -> blackberry
  var repair = $('select[name="repair"]').val(); // -> battery, etc.

  // Now do your compare logic ...
  var costs = {
    'iphone': {
      'button': 12.97,
      'battery': 25.64,
      // ...
    },
    // ...
  }

  // Safely determine the cost
  var cost = (costs[phones]) ? costs[phones][repair] : void 0;

  // If there is a corresponding cost,
  if (cost) {

    // ... display logic - this is where you show the cost.
  }

});

Answer 2

用Javascript（無JQuery）

您可以在某處（即成本表）指定數據源。 一種非常簡單的方法是將所有值放入二維關聯數組中：

var costs = {};
costs ["iphone"] = {};
costs ["iphone"]["button"] = "£10";
costs ["blackberry"]["button"] = "£5";
...

成本表的索引就是您選擇的選項的值。 您還需要為每個選擇使用ID，而不是名稱。 通過使用document.getElementById而不是document.getElementByName，可以更輕松地找到它：

<select id="phones">
    ...

然后，您將向按鈕添加onclick事件：

<input type="button" value="click me" onclick="displayCost()">

該函數可能看起來像這樣：

function displayCost() {
    var phones = document.getElementById("phones");
    var items = document.getElementById("repair");

    var phone = phones.options[phones.selectedIndex];
    var item = items.options[items.selectedIndex];

    if (costs[phone.value] && costs[phone.value][item.value]) {
        alert("Repairing the "+item.text+" for your "+phone.text+" will cost "+costs[phone.value][item.value]);
    } else {
        alert("Could not find a cost to repair the "+item.text+" for your "+phone.text);
    }
}

Answer 3

您將必須添加自己的價目表和商品...但這有望指導您正確的方向...

 $(function() { var priceList = {}; priceList.iphoneRepair = { "button": "1", "battery": "2", "screen": "3", "back": "4" }; priceList.blackberryRepair = { "button": "1.1", "battery": "2.1", "screen": "3.1", "back": "4.1" }; priceList.SamsungRepair = { "button": "1.2", "battery": "2.2", "screen": "3.2", "back": "4.2" }; priceList.HTCRepair = { "button": "1.3", "battery": "2.3", "screen": "3.3", "back": "4.3" }; console.log( priceList ); $("#phones, #repair").on('change', function() { var repairItem = $("#phones").val() + "Repair"; console.log( repairItem ); console.log( priceList[repairItem] ); var repairItemPriceList = priceList[repairItem]; var repairCost = repairItemPriceList[$("#repair").val()]; console.log( repairCost ); $("#result").text($("#phones").val() + " -> " + $("#repair").val() + " = " + repairCost); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="phones" name="phones"> <option value="iphone">iphone</option> <option value="blackberry">blackberry</option> <option value="HTC">HTC</option> <option value="Samsung">Samsung</option> </select> <br/> <select id="repair" name="repair"> <option value="button">button</option> <option value="battery">battery</option> <option value="screen">screen</option> <option value="back">back</option> </select> <hr/> <div id="result"></div>