Javascript jQuery简单计算不起作用且未显示任何错误

我想创建通过

数据过滤器对其进行过滤的计算器。我也是jquery编程的初学者，所以不要太严格。我写的脚本，但它不工作，并没有显示任何错误

<form>
    <select id="kraska">
      <option value="0.99" data-filter="1">test1</option>
      <option value="4" data-filter="2">test2</option>
    </select>
    <input id="metr" type="text" />
    <button id="calculate" type="submit">Calculate</button>
    <p id="result"></p>
</form>
<p id="result"></p>

您需要删除
数据过滤器
至
（“过滤器”）

将按钮类型更改为button而不是submit

<button id="calculate" type="button">Calculate</button>

计算

如果它的提交按钮表单不会被提交，页面在点击后也不会刷新。
$（'kraska'）。数据（'data-filter'）
应该是
$（'kraska'）。attr（'data-filter'）
（或
$（'kraska'）。数据（'filter'）
，但除非你正在使用
数据的功能，否则不需要它做的其他事情）

还要注意，
val
将始终为您提供一个字符串（如果元素存在）
*
和
/
将强制将其转换为数字，但记住这一点仍然很有用，因为
+
不会（您将获得字符串连接）

s不正确（但无害），则在
上的块后添加code>

和注意，如果不阻止默认操作，则
按钮type=“submit”
将提交表单。在您的情况下，您不需要提交，因此您需要
button type=“button”
。（您不能只关闭
类型
，默认的
类型
是
“提交”
，因此您需要愚蠢、冗余的
）
将按钮类型更改为
按钮
，而不是提交，这样当您单击时表单将不会提交，页面也不会刷新，并且您的单击事件将触发：

<button id="calculate" type="button ">Calculate</button>

注意：您不必使用
html（）
当您想要影响文本时，最好使用
text（）

希望这有帮助。
$（“#计算”）。单击（函数（）{
var filter=$（'#kraska选项：selected'）。数据（'filter'）；
如果（过滤器==1）{
var result=$（'#kraska'）.val（）*$（'#metr'）.val（）；
}
如果（过滤器==2）{
var result=$（'#kraska'）.val（）/$（'#metr'）.val（）；
}
$（“#结果”）。文本（结果）
})

测试1
测试2
算计

您需要对代码进行一些更正：

当您使用
data
方法获取任何数据属性的值时，您需要使用属性名称，而不使用
data-
部分
当您在
选项
元素上指定数据属性值时，您正在尝试获取select元素的数据属性值。因此，您需要选择
：selected
选项
我还删除了按钮的类型
submit
，尽管您可以在单击处理程序中使用
e.preventDefault（）
来处理它，即使您希望将其保留为
type=“submit”
按钮

$（“#计算”）。在（“单击”上，函数（e）{
if（$（'#kraska选项：选中'）。数据（'filter'）==1）{
var result=$（'#kraska'）.val（）*$（'#metr'）.val（）；
};
if（$（'#kraska选项：选中'）。数据（'filter'）==2）{
var result=$（'#kraska'）.val（）/$（'#metr'）.val（）；
};
$（'#result'）.html（result）
})

测试1
测试2
算计

$（'#kraska'）。数据（'data-filter'）
->
$（'#kraska'）。数据（'filter'）
您的按钮类型是提交，请尝试将其设置为按钮本身
<button id="calculate" type="button ">Calculate</button>

$('#kraska option:selected').data('filter')