使用.class标识符错误，使用jquery从选择列表中选择值

Question

我做错了什么，或者我应该如何解决这个问题。

请看以下小提琴：

fiddle

$(document).ready(function() {

  $(".metric_div").hide();

  $("#solid_radio").click(function() {
    $("#solid").show();
    $("#liquid").hide();
    $("#volume").hide();
    $("#none").hide();
  });

  $("#liquid_radio").click(function() {
    $("#solid").hide();
    $("#liquid").show();
    $("#volume").hide();
    $("#none").hide();
  });

  $("#volume_radio").click(function() {
    $("#solid").hide();
    $("#liquid").hide();
    $("#volume").show();
    $("#none").hide();
  });

  $("#input1").change(function() {
    console.log($("#input1").val());
    var input1 = $("#input1").val();

    console.log('multiplier: ' + get_multiplier());
    $("#result").val(input1 * get_multiplier());
  });

  function get_multiplier() {
    var multiplier = $(".multiplier option:selected").val();
    return multiplier;
  }

});

• 用户选择“solid（g）”单选按钮

• 调用Jquery .show（）并显示下拉列表

• 在下拉列表中选择“KG”。值= 1000

• getMultiplier（）函数应该返回1000，但它不会

• 为什么

Answer 1

第一个问题是您在class元素上两次声明select属性：

<form class="form-control" class="multiplier">

而不是

<form class="form-control multiplier">

第二个问题是您有multiplier个类的多个元素，因此当您选择$(".multiplier option:selected").val()时，它会使用multiplier类检索第一个元素的值。您需要获取可见multiplier元素的值：

$(".multiplier:visible option:selected").val()

Here's an updated fiddle