CODEWITHSUNDEEP
javascriptjqueryselectdynamic
Zain Deeb
Zain Deeb

Reputation: 39

Select Box Change Dependent Options dynamically

I have a question,I'll be very greatfull if any one will help me to find the answer.

I have an object:

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

I am looping through it and appending the values into a select tag as options here is my code:

 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
    }
}

the loop works perfectly.I don't want to push all the elements, but the arrays values. or something like dependent option list. For example, the user select first cylinder "-2.75" and the second select tag will display only the values from it's array

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

any ideas? Thanks in advance.

Upvotes: 1

Views: 404

Answers (1)

gjijo
gjijo

Reputation: 1206

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>

Are you looking for something like this.

Upvotes: 1

Related Questions