Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Depending drop down lists

Hi guys,

I'm trying to create 3 drop down lists that depend on each other.

For example: Country, State, City

If the user selects United States, then he has to choose a State from that country, and a City from that State.

What I have done (based on what I see in a website):

I created a Free Format question. In the HTML field I put this code:
<script type="text/javascript" src="countryStateCity.js"></script>

<fieldset style="width: 230px;">
<legend><strong>Make your selection</strong></legend>
<p>
<table>
<tr>
<td style="text-align: left;">Country:</td>
<td style="text-align: left;">
<select name="country" id="country" onchange="setStates();">
  <option value="Canada">Canada</option>
  <option value="Mexico">Mexico</option>
  <option value="United States">United States</option>
</select>
</td>
</tr><tr>
<td style="text-align: left;">State:</td>
<td style="text-align: left;">
<select name="state" id="state" onchange="setCities();">
  <option value="">Please select a Country</option>
</select>
</td>
</tr><tr>
<td style="text-align: left;">City:</td>
<td style="text-align: left;">
<select name="city"  id="city">
  <option value="">Please select a Country</option>
</select>
</td>
</tr>
</table>
</fieldset>


Then, in Advance --> Costum JavaScript Verification, I put this:
/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: Michael J. Damato | http://developing.damato.net/ */
// State lists
var states = new Array();

states['Canada'] = new Array('Alberta','British Columbia','Ontario');
states['Mexico'] = new Array('Baja California','Chihuahua','Jalisco');
states['United States'] = new Array('California','Florida','New York');


// City lists
var cities = new Array();

cities['Canada'] = new Array();
cities['Canada']['Alberta']          = new Array('Edmonton','Calgary');
cities['Canada']['British Columbia'] = new Array('Victoria','Vancouver');
cities['Canada']['Ontario']          = new Array('Toronto','Hamilton');

cities['Mexico'] = new Array();
cities['Mexico']['Baja California'] = new Array('Tijauna','Mexicali');
cities['Mexico']['Chihuahua']       = new Array('Ciudad Ju├írez','Chihuahua');
cities['Mexico']['Jalisco']         = new Array('Guadalajara','Chapala');

cities['United States'] = new Array();
cities['United States']['California'] = new Array('Los Angeles','San Francisco');
cities['United States']['Florida']    = new Array('Miami','Orlando');
cities['United States']['New York']   = new Array('Buffalo','new York');


function setStates() {
  cntrySel = document.getElementById('country');
  stateList = states[cntrySel.value];
  changeSelect('state', stateList, stateList);
  setCities();
}

function setCities() {
  cntrySel = document.getElementById('country');
  stateSel = document.getElementById('state');
  cityList = cities[cntrySel.value][stateSel.value];
  changeSelect('city', cityList, cityList);
}

function changeSelect(fieldID, newOptions, newValues) {
  selectField = document.getElementById(fieldID);
  selectField.options.length = 0;
  for (i=0; i<newOptions.length; i++) {
    selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]);
  }
}

// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  setStates();
});


At first sight, it seems its going to work... but I can only select the country... the State dont refresh...

Do you think it is possible to do in Sawtooth?

Thanks one more time,

Cheers,
Bruno
asked Feb 27, 2014 by Bruno Marques (315 points)
edited Apr 9, 2014 by Bruno Marques

1 Answer

+1 vote
Hi,

I would do same thing using Grid question with JQuery. I would create grid option with all options available.

For e.g. I assume you have 3 option in column 1 and 2 model for each option in column 2 and mine question name is Q1. Code would be looks like in grid footer.

<script type="text/javascript" src="/studyname/graphics/system/jquery-1.7.1.min.js"></script>
 
<script type="text/javascript">
    jQuery.noConflict();
    jQuery(document).ready(function ($) {
  $('#Q1_r1_c1').on("change", function() {
        var i=1;
        for(i=1;i<=6;i++)
        {
            $("#Q1_r1_c2_"+i+"").remove(); 
        }
        var cattype = $(this).val(); 
    if (cattype == '1')
    { 
        $("#Q1_r1_c2").append('<option value="1" id="Q1_r1_c2_1">Option 1</option><option value="2" id="Q1_r1_c2_2">Option 2</option>');
                var i=1;
                for(i=3;i<6;i++)
                {
                    $("#Q1_r1_c2_"+i+"").remove(); 
        }
        }
    else if (cattype == '2')
    { 
        var i=1;
        for(i=1;i<=2;i++)
        {
            $("#Q1_r1_c2_"+i+"").remove(); 
        }
        $("#Q1_r1_c2").append('<option value="3" id="Q1_r1_c2_3">Option 3</option><option value="4" id="Q1_r1_c2_4">Option 4</option>');
        var i=1;
        for(i=5;i<=6;i++)
        {
            $("#Q1_r1_c2_"+i+"").remove(); 
        }
        }
        else if (cattype == '3')
        { 
            var i=1;
            for(i=1;i<=4;i++)
            {
                $("#Q1_r1_c2_"+i+"").remove(); 
            }
            $("#Q1_r1_c2").append('<option value="5" id="Q1_r1_c2_5">Option 5</option><option value="6" id="Q1_r1_c2_6">Option 6</option>');
             
        }
    else
    { 
         
        }
    });
    });
</script>


You only need to change studyname in first line to call "jquery-1.7.1.min.js"
It will check the value at column 1 and will show only relative brand at column 2.
answered Feb 28, 2014 by Rajesh Rana Gold (23,660 points)
...