Javascript 为什么可以'；我有两个jQuery函数，一个在另一个里面？

我试图创建两个选择框，一个是

dad

选择框和一个

son

选择框，当您在

dad

中选择一个值等于

1

的选项时，例如，

son

选择框上唯一可用的选项将是那些值等于

1

的选项。但是，我在

dad

和

上使用了一个
.change
函数和一个

感谢您的帮助

$('#dad').change(function(d){
  $("#son > option").each(function(s) {
    if($(d).val() == $(s).val()){
       $(s).show(0);
    }else{
      $(s).hide(0);
    }
  });
});

我的完整代码：


var-dadArray=[[1，'Option1']，[2，'Option2']；
var Sonaray=[[1,1，'Son1']，[2,2，'Son2']，[3,2，'Son2']；
函数getDad（dad，id）{
var size=dad.length；
对于（var i=0；i当启用
dad
更改时，您需要使用该值显示
son
的选项吗

$('#dad').on('change',function(){
  var needle = $(this).val();
  $("#son option").each(function() {
   var option = $(this);
   option.hide();
   if(option.val() == needle) {
     option.show();
   }
  });

此外，您还可以将数据传递到html属性中，例如第一个dad的子
。您可以使用jquery获取该属性（数据父级），例如
$（'option'）。attr（'data-parent'））
在本例中，当启用
Dad
更改时，哪个将返回
Dad第一
，您需要用该值显示
子
的选项吗

$('#dad').on('change',function(){
  var needle = $(this).val();
  $("#son option").each(function() {
   var option = $(this);
   option.hide();
   if(option.val() == needle) {
     option.show();
   }
  });

此外，您还可以将数据传递到html属性中，例如第一个dad的子
。您可以使用jquery获取该属性（数据父级），例如
$（'option'）。attr（'data-parent'））
将返回
Dad第一
在本例中
有两个核心问题，都与传递给回调函数的参数不是您所认为的有关：

 $('#dad').change(function(d){
     $(d).val(); 
 });

d
是jQuery规范化更改事件对象。
#dad
选择可用作
this
和
d.target

$("#son > option").each(function(s) {
     $(s).val();
});

此处
s
（每个
回调的第一个参数）是列表中当前项的索引。您可以将其更改为
.each（function（i，s）{…
，或在回调中使用
this
引用选项元素

在这两种情况下，jQuery都不是很有帮助，也不会产生“嘿，你不能查询事件对象”或“整数不是有效的选择器”之类的错误，因为你可以将几乎任何东西传递给
$（）
函数，它会试图理解它

此处的固定代码：

或者您可以简化函数以使用jQuery的强大功能：

有两个核心问题，都与传递给回调函数的参数不是您所认为的有关：

 $('#dad').change(function(d){
     $(d).val(); 
 });

d
是jQuery规范化更改事件对象。
#dad
选择可用作
this
和
d.target

$("#son > option").each(function(s) {
     $(s).val();
});

此处
s
（每个
回调的第一个参数）是列表中当前项的索引。您可以将其更改为
.each（function（i，s）{…
，或在回调中使用
this
引用选项元素

在这两种情况下，jQuery都不是很有帮助，也不会产生“嘿，你不能查询事件对象”或“整数不是有效的选择器”之类的错误，因为你可以将几乎任何东西传递给
$（）
函数，它会试图理解它

此处的固定代码：

或者您可以简化函数以使用jQuery的强大功能：

一种可能的解决办法：


var-dadArray=[[1，'Option1']，[2，'Option2']；
var Sonaray=[[1,1，'Son1']，[2,2，'Son2']，[3,2，'Son3']；
函数getDad（dads，id）{
//追加一次以减少重画。也可以使用map为您执行循环
$（id）.append（$.map）（dads，函数（dad）{
返回''+dad[1]+''；
}));
}
函数getSon（子，id）{
//追加一次以减少重画。也可以使用map为您执行循环
$（id）.append（$.map（子对象，函数（子对象）{
返回''+son[2]+''；
}));
}
//这里传入的元素是事件，而不是元素
var$dad=$（“#dad”）；
var$son=$（“#son”）；
$dad.更改（功能（e）{
//隐藏所有选项
$son.find（'>option'）.hide（）；
//显示具有保存价值的子对象
$son.find（'>option'）.filter（函数（）{
返回（this.value=$dad.val（））；
}).show（）；
//在选定子对象被隐藏的情况下更改索引
$son.prop（'selectedIndex'，0）；
});
getDad（daddarray，#dad'）；
getSon（声纳射线，#son'）；

可能的解决方案：


var-dadArray=[[1，'Option1']，[2，'Option2']；
var Sonaray=[[1,1，'Son1']，[2,2，'Son2']，[3,2，'Son3']；
函数getDad（dads，id）{
//追加一次以减少重画。也可以使用map为您执行循环
$（id）.append（$.map）（dads，函数（dad）{
返回''+dad[1]+''；
}));
}
函数getSon（子，id）{
//追加一次以减少重画。也可以使用map为您执行循环
$（id）.append（$.map（子对象，函数（子对象）{
返回''+son[2]+''；
}));
}
//这里传入的元素是事件，而不是元素
var$dad=$（“#dad”）；
var$son=$（“#son”）；
$dad.更改（功能（e）{
//隐藏所有选项
$son.find（'>option'）.hide（）；
//显示具有保存价值的子对象
$son.find（'>option'）.filter（函数（）{
返回（this.value=$dad.val（））；
}).show（）；
//在选定子对象被隐藏的情况下更改索引
$son.prop（'selectedIndex'，0）；
});
getDad（daddarray，#dad'）；
getSon（声纳射线，#son'）；
我不久前写过这篇文章，但不得不处理一些事情。其他答案已经解释了为什么这段原始代码不起作用。下面你可以找到一个改进的版本，在可读性和性能方面


var-dadArray=[{
价值：1，
标签：“选项1”
}, {
价值：2，
标签：“选项2”
}];
var声纳射线=[{
价值：1，
标签：“Son1”
}, {
价值：2，
标签：“Son2”
}, {
价值：2，
标签：“Son2”
}];
函数createDad（id）{
var size=dadArray.length；
var$elm=$（id）；
对于（变量i=0；i