javascript - 使用 JQuery 通过更改下拉值来更改标签的值

Question

我正在尝试使用 jQuery 通过更改下拉值来更改标签的值，但它不起作用。请帮我解决这个问题。

<select id="myselect">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
<br/>
<label id="label"></label>
<br/>

$("label").val("150.000.000");
$(("#myselect").val()).on('change', function() {
    if ($("#myselect").val() == '1') {
        $("#label").val("150.000.000");
    } else  {
        $("#label").val("350.000.000");
    }
});

Answer 1

您的选择器附加到 change事件不正确，您需要提供id作为字符串的元素的值，而不是元素本身的值。另外，label元素没有您需要使用的值 text()要更改它们，您可以使用 this change内处理程序引用 select元素。试试这个:

$("label").text("150.000.000");
$("#myselect").on('change', function() {
  if ($(this).val() == '1') {
    $("#label").text("150.000.000");
  } else {
    $("#label").text("350.000.000");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="myselect">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<br/>
<label id="label"></label>
<br/>

您甚至可以将 JS 代码缩短为:

$("label").text("150.000.000");
$("#myselect").on('change', function() {
    $("#label").text(function() {
        return $(this).val() == '1' ? "150.000.000" : "350.000.000";
    })
});