Using value of array for another array

Question

I want the user to select a 'province/state' from the first drop down, then see specified areas in that province/state, but i want to add a "other" in the second dropdown for areas which are not listed, but if the user selects "other", i want the input box to show.

I'm quite new to js and I've run into a small problem which i can't fix. sorry if it's been asked, but i tried finding a similar problem without success. Also i couldn't get this working on jsfiddle, so i apologize for the long post.

Most of the options are disabled (still a work in progress)

I have a working example of what i want to do here:

Please look at the snippet.

function filterDropDownLists(provinces, cityfilter) {
        var city1= new Array('Please Select Area','Example 1', 'Example 2', 'Example 3');
        
/*values for second dropdown*/

/*if one of these optios are selected, display specified array above*/
        switch (provinces.value) {
            case 'Gauteng':
                cityfilter.options.length = 0;
                for (i = 0; i < city1.length; i++) {
                    createOption(cityfilter, city1[i], city1[i]);
                }
                break;

            default:
                cityfilter.options.length = 1;                
        }

    }

function createOption(provincefilter, text, value) { /*add the values to the next dropdown */
        var opt = document.createElement('option');
        opt.value = value;
        opt.text = text;
        provincefilter.options.add(opt);
    }

	
	

<select class="provincefilter" id="provincefilter" onchange="filterDropDownLists(this,document.getElementById('cityfilter'))">
				<option value="selectprovince" selected>Please Select Province</option>  
				<option value="Gauteng">Gauteng</option>

			</select>


			<select class="cityfilter" id="cityfilter"> <!--second dropdown to list specified array-->
				<option value="selectarea" selected>Please Select Area</option>
			
			</select>

But the one I'm having a problem with uses an array to to insert the values. What i want is for the person to select something in the first , then it displays certain values for the second , but for the second there is an option of 'other', i want to add an input box next to it in case 'other' was selected

problem:

function filterDropDownLists_rblock(provinces, cityfilter) {		
		var gauteng = new Array('Please Select Area','Pretoria East', 'Pretoria North', 'Pretoria Central', 'Johannesburg', 'Midrand', 'Centurion','Other');
        var easterncape = new Array('Please Select Area','Port Elizabeth', 'Durban','Other');
		var freestate = new Array('Please Select Area','Louis Trichardt','Other');
		
		

        switch (provinces.value) {
            case 'Gauteng':
                cityfilter.options.length = 0;
                for (i = 0; i < gauteng.length; i++) {
                    createOption(cityfilter, gauteng[i], gauteng[i]);
                }
                break;
            default:
                cityfilter.options.length = 1;                
        }

    }

function createOption(provincefilter, text, value) {
        var opt = document.createElement('option');
        opt.value = value;
        opt.text = text;
        provincefilter.options.add(opt);
    }

function city_other_select(otherCitySelect)
{
    if(otherCitySelect){
        otherCityOptionValue = document.getElementById("city_option_other").value;
        if(otherCityOptionValue == otherCitySelect.value){
            document.getElementById("rblock_area_other").style.display = "inline-block";
        }
        else{
            document.getElementById("rblock_area_other").style.display = "none";
        }
    }
    else{
        document.getElementById("rblock_area_other").style.display = "none";
    }
}

<div class="rblock_business_area"> 
			<select class="rblock_provincefilter" id="rblock_provincefilter" onchange="filterDropDownLists_rblock(this,document.getElementById('rblock_cityfilter'))">
				<option value="selectprovince" selected>Please Select Province</option>  
				<option value="Gauteng">Gauteng</option>
			</select>

			<select class="rblock_cityfilter" id="rblock_cityfilter" onchange="city_other_select(this)">
				<option value="rblock_selectarea" selected>Please Select Area</option>
				<option value="city_option_other" id="city_option_other">Other</option>
			</select>
  
			<div class="rblock_area_other" style="display:none;">
				<input type=text name=areaother size="30px" placeholder="Please specify"/> 
			</div>
		</div>

Answer 1

I think you might get a 'clearer run' at this if you separate your data from your presentation layer and just have the logic work with that. So I've created an object with province and area properties.

The event handlers then just need to clear, filter and populate the various <select> elements.

Give this a try:

var data = [
  {"province": "Gauteng", "area": "Pretoria East"},
  {"province": "Gauteng", "area": "Pretoria North"},
  {"province": "Gauteng", "area": "Pretoria Central"},
  {"province": "Gauteng", "area": "Johannesburg"},
  {"province": "Gauteng", "area": "Midrand"},
  {"province": "Gauteng", "area": "Centurion"},
  {"province": "Sydney", "area": "Surry Hills"},
  {"province": "Sydney", "area": "Redfern"},
  {"province": "Sydney", "area": "Bondi"}
];

$('#provinceFilter').append('<option selected>Please select province</option>');
$('#areaFilter').append('<option selected>Please select area</option>');
$('#otherSelection').hide();

var provinces = [];
$.each(data, function(index, item) {
  if (provinces.indexOf(item.province) < 0) {
    provinces.push(item.province);
  };
});

$.each(provinces, function(index, item) {
  $('#provinceFilter').append('<option value=' + item + '>' + item + '</option>');
});

$('#provinceFilter').on('change', function() {
  $('#areaFilter').empty();
  var areas = [];
  $.each(data, function(index, item) {
    if (areas.indexOf(item.area) < 0 && $('#provinceFilter').val() == item.province) {
      areas.push(item.area);
    };
  });
  $.each(areas, function(index, item) {
    $('#areaFilter').append('<option value=' + item + '>' + item + '</option>'); 
  });
  $('#areaFilter').append('<option value=Other>Other</option>'); 
});

$('#areaFilter').on('change', function() {
  var area = $('#areaFilter').val();
  if (area == 'Other') {
    $('#otherSelection').show();
    $('#otherSelection').val('Which area?');
    $('#otherSelection').focus();
  } else {
    $('#otherSelection').hide();
    $('#otherSelection').val('');  
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
  <select id="provinceFilter">
  </select>
  <select id="areaFilter">
  </select>
  <input id="otherSelection" />
</div>

Answer 2

You need to define the change event on the select and on change check for other and show the input element.

For that first add an input with hide as follows,

 <input type="text" id="otherInput" name="other" class="hide"/>

And add change event on select as follows,

 cityfilter.addEventListener('change', function(){

        if(cityfilter.value == "other")
        {
          document.getElementById("otherInput").className = "";
        }
    });