如何使用 JavaScript/JQuery 获取下拉列表的选定值

Question

我是 JavaScript 的新手，需要一些帮助，我还没有找到解决这个问题的方法，如果可能的话，我将不胜感激。我先谢谢你了。

好的，我有两个下拉列表，我想做的是创建一个函数，允许我根据所选选项的组合打印出一个值。例如，如果在第一个下拉列表中选择 "iPhone"，然后在第二个下拉列表中选择 "button"，它将在文本框中显示该维修的成本。

 <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）

您可以在某处指定您的数据源（即 table 的成本）。一个非常简单的方法是将所有值放在一个二维关联数组中：

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

您的 table 成本索引将是您 select 中选项的值。您还需要为每个 select 使用 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>

如何使用 JavaScript/JQuery 获取下拉列表的选定值

How to get the selected value of a drop-down list with JavaScript/JQuery

javascript

jquery

html-select