Populate One Dropdown Based on Selection in Another

let data = [{"id":1,"name":"USA","parentid":0},
{"id":2,"name":"Japan","parentid":0},
{"id":3,"name":"Europe","parentid":0},
{"id":4,"name":"California","parentid":1},
{"id":5,"name":"Oklahoma","parentid":1},
{"id":6,"name":"Arizona","parentid":1},
{"id":7,"name":"Kantô","parentid":2},
{"id":8,"name":"Kansai","parentid":2},
{"id":9,"name":"Chügoku","parentid":2},
{"id":10,"name":"France","parentid":3},
{"id":11,"name":"Deutschland","parentid":3},
{"id":12,"name":"Espana","parentid":3},
{"id":13,"name":"Sacramento","parentid":4},
{"id":14,"name":"Los Angeles","parentid":4},
{"id":15,"name":"San Diego","parentid":4},
{"id":16,"name":"Tulsa","parentid":5},
{"id":17,"name":"Oklahoma City","parentid":5},
{"id":18,"name":"Lawton","parentid":5},
{"id":19,"name":"Phoenix","parentid":6},
{"id":20,"name":"Flagstaff","parentid":6},
{"id":21,"name":"Tucson","parentid":6},
{"id":21,"name":"Tokyo","parentid":7},
{"id":22,"name":"Chiba","parentid":7},
{"id":23,"name":"Tochigi","parentid":7},
{"id":24,"name":"Kyoto","parentid":8},
{"id":25,"name":"Osaka","parentid":8},
{"id":26,"name":"Nara","parentid":8},
{"id":27,"name":"Tottori","parentid":9},
{"id":28,"name":"Hirochima","parentid":9},
{"id":29,"name":"Okayama","parentid":9},
{"id":30,"name":"Quimper","parentid":10},
{"id":31,"name":"Toulouse","parentid":10},
{"id":32,"name":"Nancy","parentid":10},
{"id":33,"name":"Dusseldorf","parentid":11},
{"id":34,"name":"Leipzig","parentid":11},
{"id":35,"name":"Munchen","parentid":11},
{"id":36,"name":"Barcelona","parentid":12},
{"id":37,"name":"Sevilla","parentid":12},
{"id":38,"name":"Guernica","parentid":12}]

function populateList(list, pid) {
  let l = document.getElementById(list);
  l.innerHTML = "";
  let topItem = document.createElement("option");
  topItem.value = 0;
  topItem.text = "--Select--";
  l.appendChild(topItem); 
  let items = data.filter(item => item.parentid == pid);
  items.forEach(function(item){
    let newItem = document.createElement("option");
    newItem.value = item.id;
    newItem.text = item.name;
    l.appendChild(newItem);
  })
}

function updateList(selList, thisList) {
  if (thisList.value != 0) {
    populateList(selList, Number(thisList.value));
  } else {
    let s = document.getElementById(selList);
    s.value = 0;
    triggerEvent(s, "onchange");
    let sCopy = s.cloneNode(false);
    let p = s.parentNode;
    p.replaceChild(sCopy, s);
  }
}
function triggerEvent(e, trigger)
{
    if ((e[trigger] || false) && typeof e[trigger] == 'function')
    {
        e[trigger](e);
    }
}
 

function loadList1() {
  populateList("list1", 0);
}

window.onload = loadList1;

select {width:150px;}

Region: <select id="list1" onchange="updateList('list2', this);"></select>
Sub-region:<select id="list2" onchange="updateList('list3', this);"></select>>
Location:<select id="list3"></select>

Populate dropdown list upon selecting a value from another dropdown list

change your city_stats method like. This method should return id and name

def city_stats
  @state = params[:state]
  @cities = City.where(:state => state).select(:id, :name)

  respond_to do |format|
   format.json  { render :json => @cities }      
  end
end

Change your each function in ajax call like this.Since data in response is array of object we are using value.id, value.name .

$.each(data,function(key, value) { 
  listitems += '<option value="' + value.id + '">' + value.name + '</option>';    
}); 

Populating Second Dropdown Based on first dropdown from the database table without using javascript

You cant do this only with PHP. You have to use jquery OR Ajax to do this.
Please check this example page . This may help you

https://www.tutorialrepublic.com/faq/populate-state-dropdown-based-on-selection-in-country-dropdown-using-jquery.php

OR

https://www.codexworld.com/dynamic-dependent-select-box-using-jquery-ajax-php/

React - How to Populate one DropDown based on previous DropDown without updating the second default field

A cleaner approach would be a functional component for me with a memoized value. The second select is only enabled when the first one is not on default value. The default value for the second selects is spread in front of the possible options.

import React, { useMemo, useState } from 'react';
import ReactDOM from 'react-dom';

const lookup = {
  def: [{ id: '0', text: 'Choose your model' }],
  mazda: [
    { id: '1', text: '1' },
    { id: '2', text: '2' },
    { id: '3', text: '3' },
    { id: '4', text: '4' },
    { id: '5', text: '5' },
  ],
  bmv: [
    { id: 'a', text: 'a' },
    { id: 'b', text: 'b' },
    { id: 'c', text: 'c' },
    { id: 'd', text: 'd' },
    { id: 'e', text: 'e' },
  ],
};

function App() {
  const [dataValue, setDataValue] = useState('def');
  const options = useMemo(() => lookup[dataValue], [dataValue]);

  const onChange = ({ target: { value } }) => {
    setDataValue(value);
  };

  return (
    <div>
      <select onChange={onChange}>
        <option value='def'>Choose your car</option>
        <option value='mazda'>Mazda</option>
        <option value='bmv'>BMV</option>
      </select>
      <hr />

      <select disabled={dataValue === 'def'}>
        {[...lookup.def, ...options].map(({ id, text }) => (
          <option key={id} value={id}>
            {text}
          </option>
        ))}
      </select>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

export default App;

Dynamically update a dropdown list based on another dropdown list?

You can use split(',') to split values then using for-loop you can get values from split array and finally use $("#beta option[value=" + vals + "]").show() to show options where values matches.

Demo Code:

$("#alpha").on("change", function() {
  var values = $(this).val().split(',') //split value which is selected
  $("#beta option").hide() //hide all options from slect box
  //loop through values
  for (var i = 0; i < values.length; i++) {
    var vals = values[i]
    $("#beta option[value=" + vals + "]").show()//show that option

  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<select class="browser-default" id="alpha">
  <option value="a,b,c">One</option>
  <option value="d">Two</option>
  <option value="e,f">Three</option>
</select>

<select class="browser-default" id="beta">
  <option selected="selected" value="">--select one-- </option>
  <option value="a">First</option>
  <option value="b">Second</option>
  <option value="c">Third</option>
  <option value="d">Fourth</option>
  <option value="e">Fifth</option>
  <option value="f">Sixth</option>
</select>