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

Question

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

看下面的 fiddle :

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类(class)。您需要获取可见的值 multiplier元素:

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

Here's an updated fiddle