使用JQuery通過更改下拉值來更改標簽的值

Question

我正在嘗試使用jQuery下拉值的更改來更改label的值，但是它不起作用。 請幫我解決這個問題。

<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()進行更改的值，您可以在change處理程序中使用this來引用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";
    })
});

Answer 2

您可以將所有值保存在數組中，並且可以使用value計算要選擇的value的索引。

以下片段描述了相同的內容：

 var data = ["150.000.000", "350.000.000", "550.000.000", "750.000.000"]; $("#myselect").on("change", function() { var selectedVal = $("option:selected",this).val(); var newValue = data[parseInt(selectedVal)-1]; $("#label").text(newValue); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/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/> 

Answer 3

試試這個代碼：

  $(document).ready(function() {
  $("label").text("150.000.000");
  $("#myselect").on('change', function() {
    if ($("#myselect").text() == '1') {

      $("#label").text("150.000.000");

    } else {

      $("#label").text("350.000.000");
    }
  });
});