javascript - Select Box Change Dependent Options dynamically -


i have question,i'll greatfull if 1 me find answer.

i have 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 looping through , appending values select tag options here code:

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

the loop works perfectly.i don't want push elements, arrays values. or dependent option list. example, user select first cylinder "-2.75" , second select tag display values it's array

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

any ideas? in advance.

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 fill colors  function fillcolors() {    $('select[name=color]').append($('<option>select</option>'));    (var property in myobj) {      if (myobj.hasownproperty(property)) {        $('select[name=color]').append($('<option value="' + property + '">' + property + '</option>'));      }    }  }    //function fill diameter  function filldiameters(color) {    $('select[name=diameter]').html('');    $('select[name=cylinder]').html('');    $('select[name=diameter]').append($('<option>select</option>'));    (var property in myobj[color]) {      if (myobj[color].hasownproperty(property)) {        (var diameter in myobj[color][property]) {          if (myobj[color][property].hasownproperty(diameter)) {            $('select[name=diameter]').append($('<option value="' + diameter + '">' + diameter + '</option>'));          }        }      }    }  }    //function fill cylinder  function fillcylinderrs(color, paramdiameter) {    $('select[name=cylinder]').html('');    $('select[name=cylinder]').append($('<option>select</option>'));      (var property in myobj[color]) {      if (myobj[color].hasownproperty(property)) {        (var diameter in myobj[color][property]) {          if (myobj[color][property].hasownproperty(diameter) && diameter == paramdiameter) {            var cylinders = myobj[color][property][diameter];            (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 looking this.


Comments

Post a Comment

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

i running os ububtu 16.04. ultimate goal able run php script cron job every minute. here php script located @ /var/www/html/tests/test/index.php : <?php $directorypath = $_server['document_root']."/tests/test/data/"; echo "directorypath: $directorypath<br><br>";//check $imagefilepathsarray = glob($directorypath . "*.{png,gif}", glob_brace); echo "<br><br>imagefilepathsarray: "; print_r($imagefilepathsarray);//check ?> when open php script in browser visiting url my-ip-address/tests/test/index.php , get: directorypath: /var/www/html/tests/test/data/ imagefilepathsarray:array( [0] => /var/www/html/tests/test/data/pic.png [1] => /var/www/html/tests/test/data/pic.gif ) before writing cron job in crontab file, need check if can run anywhere using terminal . opened ubuntu terminal @ /home/ location, , executed in terminal: sudo php /var/www/html/tests/test/index.php i got following out...
Read more

php - How can i create a user dashboard -

today have questions you, want create user dashboard site, include (obviously), users data, example -email -username -and others stuff how can information, , print them in html page? if can, how can these information via php sessions? shuld use session? example, if user login, , start new session ( session_start() ), how can data print in dashboard? should use php "project"? in advice, have day , thank time!
Read more

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -

i have jquery mobile page fixed full-screen toolbar, data-tap-toggle enabled. straight under toolbar have positioned banner should slide upwards when toolbar hiding , slide downward when toolbar showing. jquery mobile toggles toolbar applying , removing ui-fixed-hidden class - sadly, can't find in documentation of toolbar widget toggle , hide or show event that. how can detect when toolbar toggled, reposition banner? .banner { position: fixed; background-color: darkseagreen; top: 46px; min-height: 48px; width: 100%; text-align: center; line-height: 48px; } <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> <script src="https://code.jquery.com/jquery-1....
Read more