如何在jquery筛选器中使用select选项的数据属性？

我正在尝试创建依赖下拉列表，无法使用value属性。我发现codepen除了使用值之外，还可以做我想要的事情。所以我将其分叉，并将值更改为数据大小，但这不起作用

我试过使用

$（this）.data（“size”）

和一些变体，但可能有语法错误

<option value="1">Fruit</option>


<option data-size="1">Fruit</option>

果
动物
鸟
汽车
香蕉
苹果
橙色
狼
福克斯
熊
鹰
鹰派
BWM

您可以通过

.data（“XXX”）

console.log（$（“#one”）.val（）；
console.log（$（“#2”）.data（“大小”）

果
水果
这可能有效，但可能有更好的方法：

var $select1 = $( '#select1'),
$select2 = $( '#select2' ),
$options = $select2.children();

$select1.on( 'change', function() {
$select2.html($options.filter( function(index) {
    return ($select1.find(":selected").data("size") == $(this).data("size"));
}));

}).trigger( "change" );

基本上过滤选项集，其中该数据属性等于第一个选择列表中的选定选项数据属性值。有点奇怪为什么你需要这么做，而不是使用价值观

基本上是freedomn-m发布的内容。很抱歉。没有看到。
您使用的
$（this）.data（“size”）
是正确的，但它需要应用于选定的
，而不是

不清楚为什么会在
.html（.filter（）
）过程中选择最后一个，但您可以使用
.first（）
（或
：first
）选择第一个，或者使用
.val（“”
）完全清除它

更新的代码段：


var$select1=$（'#select1'），
$select2=$（“#select2”），
$options=$select2.find（'option'）；
$select1.on（'change'，function（）{
变量大小=$（this）.find（“选项：选定”）.data（“大小”）；
$select2.html（$options.filter（'[data size=“'+size+'“]]）；
$select2.val（$select2.find（“选项：第一个”）.val（））；
//$select2.val（“”）；
}).trigger（'change'）；

果
动物
鸟
汽车
香蕉
苹果
橙色
狼
福克斯
熊
鹰
鹰派
BWM
添加
数据-
只需添加一个注释，您需要一些js/更新的js才能使其正常工作。（代码笔中可能有一些，但它需要在这里，而不是在第三方网站中）请将您的“”代码添加到您的问题中，不要只是链接到它（特别是在代码块中嵌入文本链接）.你离得不远-如果你用代码更新你的问题，我（或任何其他人）我可以给你一个解释：我想人们会喜欢一个代码笔链接而不是一堆嵌入式代码。我很抱歉。感谢freedomn-m提供的解决方案。如果你有很多无法削减的代码，codepen/fiddle是很好的，但即便如此，问题的关键还是在这个问题上。问题是第三方网站可能离线或被删除因此，正如OP所说，他们已经尝试过了？
$（this）。数据（“大小”）
一般的意见是，不要鼓励依赖JSFIDLE/codepen的低质量问题，而不是将代码添加到问题中，因为它们不会帮助未来的用户。
var size = $(this).find("option:selected").data("size");
$select2.html($options.filter('[data-size="' + size + '"]'));