Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
Create a free account

[Sheet Worker] Dynamic Select Box; replacing options onchange

hey guys, having some trouble getting dynamic select boxes to replace option on change. Base idea is to have 2 select boxes, when you change the first the second switches out option. Now I know this is going to be something simple and I could probably do it a different way, so please tell I have been racking my brain for 8 hours. HTML <form action="#" method="post" id="occupation" class="form">     <fieldset>                       Occupation<br><select id='slct1' class='sel1' name='sel1'>                 <option value='Sur'>Survivor</option>                 <option value='Trad'>Tradie</option>                 <option value='Stor'>Store Owner</option>                 <option value='Pro'>Professional</option>                 <option value='Pol'>Police</option>                 <option value='Milt'>Military</option>             </select>                          Archtype<br><select id='slct2' class='sel1' name='slct2'>             <!-- populated using JavaScript -->         </select>          </fieldset> </form> Script <script type='text/worker'>      on('change:sel1)'  function (){            var Select_List_Data = {                'slct2'                Sur: {                    text: ['Athlete', 'Biker', "Stock Broker","Student"],                    value: ['Athlete', 'Biker', "Stock Broker","Student"]                },                Trad: {                    text: ['Butcher', 'Carpenter', "Mechanic", "Sparkie"],                    value: ['Butcher', 'Carpenter', "Mechanic", "Sparkie"]                },                Stor: {                    text: ['Car Yard', 'Gun Store', 'Hardware Store','Super Market'],                    value: ['Car Yard', 'Gun Store', 'Hardware Store','Super Market']                },                Pro: {                    text: ['Fisherman', "Medical", "Ranger", "Scientist"],                    value: ['Fisherman', "Medical", "Ranger", "Scientist"]                },                Pol: {                    text: ['Officer', 'Security', 'Riot Squad', 'Sea Patrol'],                    value: ['Officer', 'Security', 'Riot Squad', 'Sea Patrol']                },                Milt: {                    text: ['Infantry', "MP", "Pilot", "Veteran"],                    value: ['Infantry', "MP", "Pilot", "Veteran"]                }            }        }            function removeAllOptions(sel, removeGrp) {     var len, groups, par;     if (removeGrp) {         groups = sel.getElementsByTagName('optgroup');         len = groups.length;         for (var i=len; i; i--) {             sel.removeChild( groups[i-1] );         }     }          len = sel.options.length;     for (var i=len; i; i--) {         par = sel.options[i-1].parentNode;         par.removeChild( sel.options[i-1] );     } } function appendDataToSelect(sel, obj) {     var f = document.createDocumentFragment();     var labels = [], group, opts;          function addOptions(obj) {         var f = document.createDocumentFragment();         var o;                  for (var i=0, len=obj.text.length; i<len; i++) {             o = document.createElement('option');             o.appendChild( document.createTextNode( obj.text[i] ) );                          if ( obj.value ) {                 o.value = obj.value[i];             }                          f.appendChild(o);         }         return f;     }          if ( obj.text ) {         opts = addOptions(obj);         f.appendChild(opts);     } else {         for ( var prop in obj ) {             if ( obj.hasOwnProperty(prop) ) {                 labels.push(prop);             }         }                  for (var i=0, len=labels.length; i<len; i++) {             group = document.createElement('optgroup');             group.label = labels[i];             f.appendChild(group);             opts = addOptions(obj[ labels[i] ] );             group.appendChild(opts);         }     }     sel.appendChild(f); document.form['occupation'].elements['sel1'].onchange = function(e) {         var relName = 'slct2';              var relList = this.form.elements[ relName ];              var obj = Select_List_Data[ relName ][ this.value ];              removeAllOptions(relList, true);              appendDataToSelect(relList, obj); }; (function() { // immediate function to avoid globals         var form = document.forms['occupation'];            var sel = form.elements['slct1'];     sel.selectedIndex = 0;              var relName = 'slct2';         var rel = form.elements[ relName ];              var data = Select_List_Data[ relName ][ sel.value ];              appendDataToSelect(rel, data);      }());        </script>

Edited 1458097674
chris b.
Sheet Author
API Scripter
The sheetworkers don't have access to the DOM. so you can't do pretty much any of that, we only get the limited functions the wiki mentions. But for multiple dropdowns, you can do some tricks with css though, such as have your 6 dropdowns already hardcoded in the html, and use css to make only one visible. But the only way to do that is also not via javascript, but by setting a checkbox or radio button (1 per dropdown) and setting all the SELECTs to display:none except the one matching the css selector matching checkbox:checked.  Brian gives an example here .
Thanks Chris, I appreciate your response. I really have no idea what I am doing besides using my knowledge and pulling bit of script online.