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

要修复您的代码，您希望收听change元素上的SELECT事件，而不是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>

Answer 2

您需要检测选择而不是选项的更改。

<强>小提琴

http://jsfiddle.net/ghopkins/o43dnbgh/

<强>脚本

$(function(){
    $('select[name="Menu"]').change(function(){
        var textId= $(this).data('text');
        var price = $( "option:selected" , this).data('price');
        $('#'+textId).val(price);  
    });
});

<强> HTML

<select name="Menu" data-text="inptxt1">
    <option value=""></option>
    <option value="A" data-price="$186.00">A</option>
    <option value="B" data-price="$200.00">B</option>
    <option value="C" data-price="$214.00">C</option>
    <option value="D" data-price="$228.00">D</option>
</select>

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

编辑放回数据属性，傻了我..

Answer 3

我不认为'select[name="Menu"] == A'是合法的jQuery选择器。我建议创建一个只找到下拉菜单的选择器，然后检查值，您可以在一个函数中执行该操作：

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

Answer 4

我认为没有必要在选择选项上添加数据属性。只需使用货币值的值和选项文本的html文本字段。

Fiddle

<select name="Menu" data-text="inptxt1">
    <option value=""></option>
    <option value="$186.00">A</option>
    <option value="$200.00">B</option>
    <option value="$214.00">C</option>
    <option value="$228.00">D</option>
</select>

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

的javascript：

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

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

4 个答案: