javascript - 文本框输出取决于下拉列表中的选择

Question

无论用户在下拉菜单中选择什么，我都需要在文本框中输出金额。我有这些代码行，但它不会改变答案。 例如，如果用户选择A，则文本框中将显示一个答案，如果他/她选择B，则将显示不同的答案。

脚本

$(function(){
   $('select[name="Menu"] == A').change(function(){
       var textId= $(this).data('text');
       $('#'+textId).val("$186.00");  
   });
});

$(function(){
    $('select[name="Menu"] == B').change(function(){
        var textId= $(this).data('text');
        $('#'+textId).val("$200.00");  
    });
});

HTML

<select name="Menu" data-text="inptxt1">
    <option value=""></option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
</select>
</select>

<input type="text" value="$0.00" name="inptxt1" id="inptxt1" readonly/>

Answer 1

要修复代码，您需要监听 SELECT 元素上的 change 事件，而不是 OPTION 。这对于 jQuery 来说尤其容易，因为您可以使用 .val() 在选定的值发生变化时获取它，如下所示:

$("select[name='Menu']").change(function()
{ 
  var selectedValue = $(this).val();
  // do stuff with selectedValue (in this case 'A', B', 'C', etc.)
});

您通常希望价格信息(可能会随着时间的推移而变化)是动态的、数据驱动的，而不是硬编码到条件语句或标记中。

向下滚动到底部并单击“运行代码片段”以查看其实际效果。它显示了多个选项如何影响成本，这听起来像是您最终想要的。

// dynamic product data comes from server (for example, on initial load or via AJAX)
var products = [{
  Code: 'A',
  Price: 100.00,
  Description: 'Large'
}, {
  Code: 'B',
  Price: 125.00,
  Description: 'X-Large'
}, {
  Code: 'C',
  Price: 150.00,
  Description: 'XX-Large'
}, {
  Code: 'D',
  Price: 1000.00,
  Description: 'WTF-Large'
}];

function RefreshProductInfo() {
  var qty = parseInt($("#ddlQty").val());
  var productCode = $("#Menu").val();
  var items = $.grep(products, function(item) {
    return item.Code === productCode;
  });
  if (items.length === 1) {
    var product = items[0];
  } else {
    product = {
      Price: 0.0
    };
  }
  $("#lblPrice").text(product.Price.toFixed(2));
  var cost = product.Price * qty;
  $("#lblCost").text(cost.toFixed(2));
}

// populate products options
$.each(products, function(idx, item) {
  $("#Menu").append($("<option></option").val(item.Code).text(item.Description));
});

// populate qty options
var maxQty = 10;
var stringBuffer = [];
for (var i = 0; i < maxQty; i++) {
  stringBuffer[i] = "<option>" + (i + 1) + "</option>";
}
$("#ddlQty").on("change", RefreshProductInfo).html(stringBuffer.join());
$("#Menu").on("change", RefreshProductInfo);

* {
  font-family: "Segoe UI", Arial, "Sans serif";
  font-size: 14px;
}
LABEL {
  display: inline-block;
  width: 100px;
  padding: 4px;
  text-align: right;
}
SPAN {
  color: #333;
  padding: 4px;
  font-weight: bold;
  display: inline-block;
  width: 100px;
  text-align: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  <label for="Menu">Size:</label>
  <select id="Menu">
    <option value="">[Choose size]</option>
  </select>
</p>
<p>
  <label for="lblPrice">Unit price:</label>
  $<span id="lblPrice">0.00</span>
</p>
<p>
  <label for="ddlQty">Qty:</label>
  <select id="ddlQty"></select>
</p>
<p>
  <label for="lblCost">Gross cost:</label>
  $<span id="lblCost">0.00</span>
</p>