Jquery 无法从数组中获取要填充的多个链接选择框

尝试在加载时填充第一个框，在第一个框更改时填充第二个框，在第二个框更改时填充第三个框。在我添加第三个链接和第二个链接之前，我已经让代码正常工作了，但是自从尝试创建第三个链接和第二个链接之后，我就没有机会创建第一个链接。任何帮助都将不胜感激

HTML代码：

 <select name="leather1" id="leather1"><option disabled="true" selected>-Select Diameter-</option></select>
<select name="leather2" id="leather2"><option disabled="true" selected>-Select Color-</option></select>
<select name="leather3" id="leather3"><option disabled="true" selected>-Select Clasp-</option></select>

JQuery代码：

    var leather12 = [
    {
     "value" : "0",
     "diameter" : "4mm",
     "colors" : ['black','color2','color3'],
     "black" : ['locking','magnetic'],
     "color2" : ['locking2','magnetic2'],
     "color3" : ['locking3','magnetic3']
    },
    {
     "value"   : "1",
     "diameter"   : "4mmd",
     "colors"  : ['black1','color22','color32'],
     "black1"  : ['locking1','magnetic1'],
     "color22"  : ['locking21','magnetic21'],
     "color32"  : ['locking31','magnetic31']
    }
   ] ;

$(function() {
 size2color = [] ;
 for(var i=0; i<leather12.length; i++) {
  size2color[leather12[i].diameter] = leather12[i].colors ;
 }
});

$(function() { 
  color2clasp = [] ;
  for(var i=2; i<leather12[getobjectbyid("leather1").value].length; i++) {
   color2clasp[leather12[getobjectbyid("leather1").value].colors] = leather12[getobjectbyname("leather1").value][this.value][i] ;
  }
});

$(function() {
 // populate diameter select box
 var options = '' ;
 for (var i = 0; i < leather12.length; i++) {
  options += '<option value="' + leather12[i].value + '">' + leather12[i].diameter + '</option>'; 
 }
 $("#leather1").html(options);   // populate select box with array

 // selecting leather1 (change) will populate leather2 select box
 $("#leather1").bind("change",
   function() {
    $("#leather2").children().remove() ;        // clear select box
    var options = '<option disabled="true" selected>-Select Color-</option>' ;
    for (var i = 0; i < size2color[this.value].length; i++) { 
     options += '<option value="' + size2color[this.value][i] + '">' + size2color[this.value][i] + '</option>'; 
    }
    $("#leather2").html(options);   // populate select box with array
   }
 );

 //selecting leather2 (change) will populate leather 2 select box
 $("#leather2").bind("change",
   function() {
    $("#leather3").children().remove();
    var options = '<option disabled="true" selected>-Select Clasp-</option>' ;
    for (var i = 0; i < color2clasp[this.value].length; i++) { 
     options += '<option value="' + color2clasp[this.value][i] + '">' + color2clasp[this.value][i] + '</option>'; 
    }
    $("#leather3").html(options);
   }
 );
  });

---

使用以下小提琴：

color2clasp在GetObjectByIdleEather1.value处抛出错误。 另外，当一个jquery行发生错误时，下面的代码行不会执行。因此select没有绑定

    var leather12 = [
    {
     "value"   : "0",
     "diameter"  : "4mm",
     "colors"  : ['black','color2','color3'],
     "black"  : ['locking','magnetic'],
     "color2"  : ['locking2','magnetic2'],
     "color3"  : ['locking3','magnetic3']
    },
    {
     "value"   : "1",
     "diameter"   : "4mmd",
     "colors"  : ['black1','color22','color32'],
     "black1"  : ['locking1','magnetic1'],
     "color22"  : ['locking21','magnetic21'],
     "color32"  : ['locking31','magnetic31']
    }
   ] ;


$(function() {    

 // populate diameter select box
 var options = '<option disabled="true" selected>-Select Diameter-</option>' ;
 for (var i = 0; i < leather12.length; i++) {
  options += '<option value="' + leather12[i].value + '">' + leather12[i].diameter + '</option>';
 }
 $("#leather1").html(options);   // populate select box with array

 // selecting leather1 (change) will populate leather2 select box
 $("#leather1").bind("change",
   function() {
    $("#leather2").children().remove() ;        // clear select box
    var options = '<option disabled="true" selected>-Select Color-</option>' ;
       var colors = leather12[this.value]["colors"];
    for (var i = 0; i < colors.length; i++) { 
     options += '<option value="' + colors[i] + '">' + colors[i] + '</option>'; 
    }
    $("#leather2").html(options);   // populate select box with array       
   }                                                              
 );

 //selecting leather2 (change) will populate leather 2 select box
 $("#leather2").bind("change",
   function() {

    $("#leather3").children().remove();
    var options = '<option disabled="true" selected>-Select Clasp-</option>' ;
       var clasp = leather12[$("#leather1").val()][$("#leather2").val()];
    for (var i = 0; i < clasp.length; i++) { 
     options += '<option value="' + clasp[i] + '">' + clasp[i] + '</option>'; 
    }
    $("#leather3").html(options);
   }
 );
});