Question

当您在dad中选择值等于{{son的选项时，我尝试创建两个选择框，dad选择框和1选择框例如，son选择框中唯一可用的选项将是值等于1的选项。但是，我在.change和dad到.each上使用了son功能，我对jQuery相对较新，所以我不会＃39我知道我做的事情是否被视为非法。

感谢任何帮助。

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

我的完整代码：

＆＃13;

var dadArray = [[1,'Option1'],[2,'Option2']];
var sonArray = [[1,1,'Son1'],[2,2,'Son2'],[3,2,'Son2']];

function getDad(dad,id){
  var size = dad.length;
  for(var i=0;i<size;i++){
    $(id).append('<option value="'+dad[i][0]+'">'+dad[i][1]+'</option>');
  }
}
function getSon(son,id){
  var size = son.length;
  for(var i=0;i<size;i++){
    $(id).append('<option id="son'+son[i][0]+'" value="'+son[i][1]+'">'+son[i][2]+'</option>');
  }
}

$('#dad').change(function(d){
  $("#son > option").each(function(s) {
    if($(d).val() == $(s).val()){
       $(s).show(0);
    }else{
      $(s).hide(0);
    }
  });
});

getDad(dadArray,'#dad');
getSon(sonArray,'#son');

＆＃13;

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<title>iterateSelectBox</title>
</head>
<body>
  <select id="dad">
  </select>
  <select id="son">
  </select>
</body>
</html>

＆＃13;

Answer 1

有两个核心问题，都与传递给回调函数的参数有关，而不是你的想法：

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

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

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

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

在这两种情况下，jQuery都不是非常有用，并且不会产生类似错误的错误，嘿，你无法查询事件对象＆＃34;或者＆＃34;整数不是有效的选择器＆＃34;，因为你几乎可以将任何内容传递给$()函数，并且它会尝试理解它。

此处修复了代码：http://jsfiddle.net/5n3ofr8n/

$('#dad').change(function(){
    var selected = this.value;
    $("#son > option").each(function() {
    if( selected == this.value){
        $(this).show();
    }else{
      $(this).hide();
    }
  });
});

或者您可以简化函数以使用jQuery的强大功能：http://jsfiddle.net/5n3ofr8n/1/

$('#dad').change(function(){
    $('#son option').hide().filter('[value=' + this.value +']').show();
});

Answer 2

可能的解决方案：http://jsfiddle.net/vo0udbt1/1/

var dadArray = [[1,'Option1'],[2,'Option2']];
var sonArray = [[1,1,'Son1'],[2,2,'Son2'],[3,2,'Son3']];

function getDad(dads, id) {
    //append once to cut down on redraws.  also use map to do the loop for you
    $(id).append($.map(dads, function(dad){
        return '<option value="'+dad[0]+'">'+dad[1]+'</option>';
    }));
}

function getSon(sons,id) {
    //append once to cut down on redraws.  also use map to do the loop for you
    $(id).append($.map(sons, function(son){
        return '<option id="son'+son[0]+'" value="'+son[1]+'">'+son[2]+'</option>';
    }));
}

//passed in element here is the event, not the element
var $dad = $('#dad');
var $son = $('#son');
$dad.change(function(e){
    //hide all the options
    $son.find('> option').hide();
    //show sons with save value
    $son.find('> option').filter(function(){
        return (this.value == $dad.val());
    }).show();
    //change index incase selected son was hidden
    $son.prop('selectedIndex', 0);
});

getDad(dadArray,'#dad');
getSon(sonArray,'#son');

<select id="dad"></select>
<select id="son"><option></option></select>

Answer 3

我刚才写这篇文章但是不得不暂时处理一下。其他答案已经解释了为什么这个原始代码不起作用。您可以在下面找到可读性和性能方面的改进版本

＆＃13;

var dadArray = [{
  value: 1,
  label: 'Option1'
}, {
  value: 2,
  label: 'Option2'
}];
var sonArray = [{
  value: 1,
  label: 'Son1'
}, {
  value: 2,
  label: 'Son2'
}, {
  value: 2,
  label: 'Son2'
}];

function createDad(id) {
  var size = dadArray.length;
  var $elm = $(id);
  for (var i = 0; i < size; i++) {
    var dad = dadArray[i];
    $elm.append($('<option/>', {
      value: dad.value,
      text: dad.label
    }));
  }
}

function createSon(id) {
  var size = sonArray.length;
  var $elm = $(id);
  for (var i = 0; i < size; i++) {
    var son = sonArray[i];
    $elm.append($('<option/>', {
      id: 'son' + i,
      value: son.value,
      text: son.label
    }));
  }
}


createDad('#dad');
createSon('#son');

$('#dad').change(function(event) {
  var $dad = $(this);
  $("#son > option").each(function(i,elm) {
    var $elm = $(elm);
    $elm[$dad.val() == $elm.val() ? 'show' : 'hide']();
  });
}).trigger("change");

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <title>iterateSelectBox</title>
</head>

<body>
  <select id="dad">
  </select>
  <select id="son">
  </select>
</body>

</html>

＆＃13;

Answer 4

在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属性，例如<option value="some value" data-parent="Dad Number One">Son of the 1st dad</option>。您可以使用jquery获取该属性（data-parent），例如$('option').attr('data-parent')，在此示例中将返回Dad Number One

为什么我不能在另一个内部有两个jQuery函数？

4 个答案: