Change hidden input field value according to select options

Question

I am trying to write a script for changing the hidden input value according to selected options.

I have hindi data stored on a variable and I need to pick this hindi data according to english data selected in select feild. The select options are working fine so far, but I am unable to fectch the related hindi data.

var stateObject = {
  "Bihar": {
    "Begusarai": ["Bachhwara", "Bakhari", "Balia", "Barauni", "Begusarai", "Bhagwanpur", "Birpur", "Cheriya Bariyarpur", "Chhorahi", "Dandari", "Garhpura", "Khudabandpur", "Mansoorchak", "Matihani", "Nawkothi", "Sahebpur Kamal", "Samho Akha Kurha", "Teghra"],
  },
}

var stateObjectHindi = {
  "बिहार": {
    "बेगूसराय": ["बछवारा", "बखरी", "बलिया", "बरौनी", "बेगुसराय", "भगवानपुर", "बीरपुर", "चेरिया बरियारपुर", "छौराही", "डंडारी", "गढ़पुरा", "खोदाबंदपुर", "मंसूरचक", "मटिहानी", "नावकोठी", "साहेबपुर  कमाल", "साम्हो अखा कुरहा", "तेघरा"],
  },

}
window.onload = function() {
  var stateList = document.getElementById("stateList"),
    stateListHindi = document.getElementById("stateListHindi"),
    districtList = document.getElementById("districtList"),
    districtListHindi = document.getElementById("districtListHindi"),
    blockList = document.getElementById("blockList"),
    blockListHindi = document.getElementById("blockListHindi");
  for (var country in stateObject) {
    stateList.options[stateList.options.length] = new Option(country, country);

  }
  stateList.onchange = function() {

    districtList.length = 1; // remove all options bar first
    blockList.length = 1; // remove all options bar first
    if (this.selectedIndex < 1) return; // done 
    for (var state in stateObject[this.value]) {
      districtList.options[districtList.options.length] = new Option(state, state);
    }
  }
  stateList.onchange(); // reset in case page is reloaded
  districtList.onchange = function() {
    blockList.length = 1; // remove all options bar first
    if (this.selectedIndex < 1) return; // done 
    var district = stateObject[stateList.value][this.value];
    for (var i = 0; i < district.length; i++) {
      blockList.options[blockList.options.length] = new Option(district[i], district[i]);
      stateListHindi.value = this.value;
    }
  }
}

<select name="state" id="stateList">
  <option value="" selected="selected">Select State</option>
</select>

<select name="district" id="districtList">
  <option value="" selected="selected">Select District</option>
</select>

<select name="block" id="blockList">
  <option value="" selected="selected">Select Block</option>
</select>
<br/> State in Hindi: <input type="hidden" class="stateListHindi" id="stateListHindi" name="stateListHindi" value="" /><br/> District in Hindi: <input type="hidden" class="districtListHindi" id="districtListHindi" name="districtListHindi" value="" /><br/>Block in Hindi: <input type="hidden" class="blockListHindi" id="blockListHindi" name="blockListHindi" value="" /><br/>

JSFiddle Demo

Answer 1

Your data structure is perhaps not too well-suited for what you want here. You need to find the corresponding property in both objects, for the first two levels, by their position - so you will have to extract the keys first, and use indexOf to locate them.

So for the state first of all, that would be

var selectedKeyIndex = Object.keys(stateObject).indexOf(this.value);
stateListHindi.value = Object.keys(stateObjectHindi)[selectedKeyIndex];

Extract the keys from the English object, and find the index of the property matching the current selection in there. Then use that index, to extract the corresponding property name from the Hindi object.

Now, for the district, you'll have to do the same thing, but for one more level:

var selectedKeyIndex = Object.keys(stateObject[stateList.value]).indexOf(this.value);
districtListHindi.value = Object.keys(stateObjectHindi[stateListHindi.value])[selectedKeyIndex];

And then for the Blocks, which are in an array, you can select directly by index,

var selectedKeyIndex = stateObject[stateList.value][districtList.value].indexOf(this.value);
blockListHindi.value = stateObjectHindi[stateListHindi.value][districtListHindi.value][selectedKeyIndex];

All of it put together here: https://jsfiddle.net/6g5ad4cz/.
(I made the hidden fields into normal text fields, so that the result can be visually checked straight away.)