javascript - 选择框动态更改相关选项

Question

我有一个问题，如果有人能帮助我找到答案，我将非常感激。

我有一个对象:

myObj = {
"red":{
    "10729,10730,10732":{
                "-2.75":["+1.75","+1.50","+1.25","+1.00","+0.75","+0.50","+0.25","-0.25"],
                "-2.50":["+2.00","0.00","-0.50","-0.75","-1.00","-1.25"],
                "-2.25":["+2.00","0.00","-1.50","-1.75","-2.00"],
                "-2.00":["+2.00","0.00","-2.00","-2.25"],
                "-1.75":["+2.00","0.00","-2.25"],
                "-1.50":["+2.00","0.00","-2.25"],
                "-1.25":["-2.25"],
                "-1.00":["+2.00","-2.25"],
                "-0.75":["+2.00","-2.25"],
                "-0.50":["+2.00","-2.25"],
                "-0.25":["-2.25"],
                "0.00":["+1.75","0.00","-2.25"],
                "+0.25":["-2.00","-2.25"],
                "+0.50":["+1.75","-1.75"],
                "+0.75":["+1.75","0.00","-1.50","-1.75"],
                "+1.00":["0.00","-1.50"],
                "+1.25":["+1.75","0.00","-1.25"],
                "+1.50":["+1.50","0.00","-1.00"],
                "+1.75":["0.00","-0.75","-1.00"],
                "+2.00":["+1.50","-0.50","-0.75"],
                "+2.25":["+1.50","-0.25","-0.50"],
                "+2.50":["+1.50","+0.25","0.00","-0.25"],
                "+2.75":["+1.50","+0.75","+0.50","+0.25"],
                "+3.00":["+1.75","+1.50","+1.25","+1.00","+0.75"],
                "+3.25":["+1.75","+1.50"]
    }
},

"gray":{
    "10730,10731":{
        "-1.00":["+0.25","0.00","-0.25","-0.50"],
        "-0.75":["+0.75","+0.50","+0.25","-0.50","-0.75"],
        "-0.50":["+0.75","-0.75"],
        "-0.25":["+0.75","-0.75"],
        "0.00":["+3.25","+3.00","+2.75","+2.50","+2.25","+1.00","+0.75","-0.50","-0.75","-1.50","-1.75"],
        "+0.25":["+1.00","-0.50"],"+0.50":["+1.00","-0.50"],"+0.75":["+1.00","-0.50"]
    }
}
};//end of myObj

我正在遍历它并将值作为选项附加到选择标记中这是我的代码:

 for(h in myObj){ //h is color
    for (x in myObj[h]) {   //x is diameter
      for(y in myObj[h][x]){ //y is cylinder
        $(".cyl").append('<option value="">' + y + '</option>');               
         for(z in myObj[h][x][y]){  //// z is array of sph,and myObj[h][x][y][z] is the array elements
            $(".sph").append('<option value="">' + myObj[h][x][y][z] + '</option>');                
           }  ////sph
       }////cyl
    }
}

循环运行完美。我不想推送所有元素，而是推送数组值。或类似依赖选项列表的东西。例如，用户选择第一个圆柱 "-2.75"，第二个选择标签将仅显示其数组中的值

["+1.75","+1.50","+1.25","+1.00","+0.75","+0.50","+0.25","-0.25"]

有什么想法吗？提前致谢。

Answer 1

var myObj = {
  "red": {
    "10729,10730,10732": {
      "-2.75": ["+1.75", "+1.50", "+1.25", "+1.00", "+0.75", "+0.50", "+0.25", "-0.25"],
      "-2.50": ["+2.00", "0.00", "-0.50", "-0.75", "-1.00", "-1.25"],
      "-2.25": ["+2.00", "0.00", "-1.50", "-1.75", "-2.00"],
      "-2.00": ["+2.00", "0.00", "-2.00", "-2.25"],
      "-1.75": ["+2.00", "0.00", "-2.25"],
      "-1.50": ["+2.00", "0.00", "-2.25"],
      "-1.25": ["-2.25"],
      "-1.00": ["+2.00", "-2.25"],
      "-0.75": ["+2.00", "-2.25"],
      "-0.50": ["+2.00", "-2.25"],
      "-0.25": ["-2.25"],
      "0.00": ["+1.75", "0.00", "-2.25"],
      "+0.25": ["-2.00", "-2.25"],
      "+0.50": ["+1.75", "-1.75"],
      "+0.75": ["+1.75", "0.00", "-1.50", "-1.75"],
      "+1.00": ["0.00", "-1.50"],
      "+1.25": ["+1.75", "0.00", "-1.25"],
      "+1.50": ["+1.50", "0.00", "-1.00"],
      "+1.75": ["0.00", "-0.75", "-1.00"],
      "+2.00": ["+1.50", "-0.50", "-0.75"],
      "+2.25": ["+1.50", "-0.25", "-0.50"],
      "+2.50": ["+1.50", "+0.25", "0.00", "-0.25"],
      "+2.75": ["+1.50", "+0.75", "+0.50", "+0.25"],
      "+3.00": ["+1.75", "+1.50", "+1.25", "+1.00", "+0.75"],
      "+3.25": ["+1.75", "+1.50"]
    }
  },

  "gray": {
    "10730,10731": {
      "-1.00": ["+0.25", "0.00", "-0.25", "-0.50"],
      "-0.75": ["+0.75", "+0.50", "+0.25", "-0.50", "-0.75"],
      "-0.50": ["+0.75", "-0.75"],
      "-0.25": ["+0.75", "-0.75"],
      "0.00": ["+3.25", "+3.00", "+2.75", "+2.50", "+2.25", "+1.00", "+0.75", "-0.50", "-0.75", "-1.50", "-1.75"],
      "+0.25": ["+1.00", "-0.50"],
      "+0.50": ["+1.00", "-0.50"],
      "+0.75": ["+1.00", "-0.50"]
    }
  }
}; //end of myObj

//Doc ready
$(function() {
  fillColors();
});

// Change event of colors
$(document).on('change', 'select[name=color]', function() {
  fillDiameters($(this).val());
});
// Change event of diameter
$(document).on('change', 'select[name=diameter]', function() {
  fillCylinderrs($('select[name=color] option:selected').val(), $(this).val());
});

//function to fill all colors
function fillColors() {
  $('select[name=color]').append($('<option>select</option>'));
  for (var property in myObj) {
    if (myObj.hasOwnProperty(property)) {
      $('select[name=color]').append($('<option value="' + property + '">' + property + '</option>'));
    }
  }
}

//function to fill diameter
function fillDiameters(color) {
  $('select[name=diameter]').html('');
  $('select[name=cylinder]').html('');
  $('select[name=diameter]').append($('<option>select</option>'));
  for (var property in myObj[color]) {
    if (myObj[color].hasOwnProperty(property)) {
      for (var diameter in myObj[color][property]) {
        if (myObj[color][property].hasOwnProperty(diameter)) {
          $('select[name=diameter]').append($('<option value="' + diameter + '">' + diameter + '</option>'));
        }
      }
    }
  }
}

//function to fill cylinder
function fillCylinderrs(color, paramDiameter) {
  $('select[name=cylinder]').html('');
  $('select[name=cylinder]').append($('<option>select</option>'));

  for (var property in myObj[color]) {
    if (myObj[color].hasOwnProperty(property)) {
      for (var diameter in myObj[color][property]) {
        if (myObj[color][property].hasOwnProperty(diameter) && diameter == paramDiameter) {
          var cylinders = myObj[color][property][diameter];
          for (var cyl in cylinders) {
            $('select[name=cylinder]').append($('<option value="' + cylinders[cyl] + '">' + cylinders[cyl] + '</option>'));
          }
        }

      }
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="color">
</select>
<select name="diameter">
</select>
<select name="cylinder">
</select>

你在找这样的东西吗？