在一个带有 jquery 的函数中使用来自不同选择选项的值答案

【问题标题】：use values from different select options in one function with jquery在一个带有 jquery 的函数中使用来自不同选择选项的值
【发布时间】：2016-08-29 13:54:58
【问题描述】：

我的 html 中有两个选择选项，我想计算两个城市之间的旅行费用，我将如何比较用户使用 jquery 选择的两个选择选项，这是我现在正在使用的代码。

</head>
<body>
  <div>
    <select id="origin" name="form_select">
      <option value="" disabled selected> select cargo origin...</option>
      <option value="0">chicago</option>
      <option value="1">london</option>
      <option value="1">berlin</option>
    </select>
  </div>
  <div>
    <select id="destination" name="form_select">
      <option value="" disabled selected> select cargo destination...< /option>
      <option value="0">dubai</option>
      <option value="1">london</option>
      <option value="1">berlin</option>
    </select>
  </div>

这是我的一些 jquery 代码，现在它只在选择一个选项时显示和隐藏 div，我无法了解如何从同一个函数的不同选择选项中调用不同的值来计算距离

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("#origin").change(function(){
      $(this).find("option:selected").each(function(){
        if($(this).attr("value")=="1"){
          $("#hidden_div").show();
        }else{
          $("#hidden_div").hide();
        }     
      });
    });

    $("#destination").change(function(){
      $(this).find("option:selected").each(function(){
        var my =$("#test" ).val();
        if($(this).attr("value")<="1"){
          var my = $( "#myselect option:selected" ).text();
          alert(my);
          $("#hidden_div").show();
        }else{
          $("#hidden_div").hide();
        }
      });
    });

  });
</script>

【问题讨论】：

我将如何比较两个选择选项 ...您要比较什么？文本，值？
$('#origin').val() === $('#destination').val() ?
我要比较值

标签： javascript jquery html

【解决方案1】：

首先，您可能希望使用国家/地区名称作为这些选项的值

其次，您复制了起点和终点选项的最后一个和倒数第二个的值

使用 jQuery，您还可以使用 .val() 来获取 input 元素的值，了解更多信息，请参阅 http://api.jquery.com/val/

您可以考虑使用以下脚本来比较目的地：

function Compare(origin, destination) {
    if (origin.length > 0 && destination.length > 0) {
    if (origin == destination) alert("You have the same origin and destination!");
    else {
        $(".result").html("origin: " + origin + "<br />destination: " + destination);
        return true;
    }
  }
  return false
}

var $origin = $("#origin"),
        $destination = $("#destination");

$("#origin, #destination").change(function(){
    Compare($origin.val(), $destination.val());
});

你可以在https://jsfiddle.net/m9ghaj41/上试试

【讨论】：

【解决方案2】：

假设当您说value=0 或value=1 时，您的意思是比较两个值之间的差异，那么您会这样说：

val price = Math.abs($('#origin').val() - $('#destination').val());

【讨论】：

【解决方案3】：

总的来说，这可以帮助您：

绑定选择更改操作到 fce 计算距离
这个 fce 获取 select 的值并做你的数学运算

例子：

function calcualteDistance(){
    var origin = $("#origin").val();
  var destination = $("#destination").val();

    if(origin && destination) {
    console.log("calculate");
  }
}

$("#origin, #destination").change(calcualteDistance);

https://jsfiddle.net/m910dq7a/

【讨论】：