如何修复<select>以动态加载到另一个</select>选项上

Question

我正在尝试为动态尼日利亚和LG编写代码。 单击选择选项后，它将动态加载具有声明值的另一个选择选项。

这是html代码

<script src="jquery-1.11.3-jquery.min.js" type="text/javascript"></script>
<select name="state" id="state">
  <option selected="selected">Select item...</option>
  <option value='Abia'>Abia</option>
  <option value='Adamawa'>Adamawa</option>
</select>

这是第二个选择选项

<select name="lga" id="lga">
</select>
<script>

jQuery代码

jQuery(window).on('load', function() {
  $("#state").change(function() {
    var state = $(this).val();
    var lga = eval(state);
  })
}); 
</script>

以及LGA的javascript声明

</script>    
var Abia = ['Select item...', 'Aba North', 'Aba South', 'Arochukwu', 'Bende', 'Ikwuano', 'Isiala Ngwa North', 'Isiala Ngwa South', 'Isuikwuato', 'Obi Ngwa', 'Ohafia', 'Osisioma', 'Ugwunagbo', 'Ukwa East', 'Ukwa West', 'Umuahia North', 'muahia South', 'Umu Nneochi'];

var Adamawa = ['Select item...', 'Demsa', 'Fufure', 'Ganye', 'Gayuk', 'Gombi', 'Grie', 'Hong', 'Jada', 'Larmurde', 'Madagali', 'Maiha', 'Mayo Belwa', 'Michika', 'Mubi North', 'Mubi South', 'Numan', 'Shelleng', 'Song', 'Toungo', 'Yola North', 'Yola South'];
</script>

我希望从lga选择选项中动态加载的状态中选择任何选项。

Answer 1

以内联方式查看评论，永不，永不，永不使用eval()：

// Set up your options in an Object
let options = {
  Abia : ['Select item...', 'Aba North', 'Aba South', 'Arochukwu', 'Bende', 'Ikwuano', 'Isiala Ngwa North', 'Isiala Ngwa South', 'Isuikwuato', 'Obi Ngwa', 'Ohafia', 'Osisioma', 'Ugwunagbo', 'Ukwa East', 'Ukwa West', 'Umuahia North', 'muahia South', 'Umu Nneochi'],
  Adamawa : ['Select item...', 'Demsa', 'Fufure', 'Ganye', 'Gayuk', 'Gombi', 'Grie', 'Hong', 'Jada', 'Larmurde', 'Madagali', 'Maiha', 'Mayo Belwa', 'Michika', 'Mubi North', 'Mubi South', 'Numan', 'Shelleng', 'Song', 'Toungo', 'Yola North', 'Yola South']
};

// Don't use `window.onload` unless you need to wait for 
// external resources to finish loading. Instead, just pass
// the function you want executed when the DOM is ready 
// directly to JQuery
jQuery(function() {
  $("#state").change(function() {
    let output = ""; // will hold the HTML for second list
   
    // Loop over the array that matches the selected state
    options[$(this).val()].forEach(function(st){
      output += "<option>" + st + "</option>";
    });
    
    $("#lga").html(output); // Inject the HTML string into the list
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="state" id="state">
  <option selected="selected">Select item...</option>
  <option value='Abia'>Abia</option>
  <option value='Adamawa'>Adamawa</option>
</select>
<select name="lga" id="lga"></select>

Answer 2

   var Abia = ['Select item...', 'Aba North', 'Aba South', 'Arochukwu', 'Bende', 'Ikwuano', 'Isiala Ngwa North', 'Isiala Ngwa South', 'Isuikwuato', 'Obi Ngwa', 'Ohafia', 'Osisioma', 'Ugwunagbo', 'Ukwa East', 'Ukwa West', 'Umuahia North', 'muahia South', 'Umu Nneochi'];

    var Adamawa = ['Select item...', 'Demsa', 'Fufure', 'Ganye', 'Gayuk', 'Gombi', 'Grie', 'Hong', 'Jada', 'Larmurde', 'Madagali', 'Maiha', 'Mayo Belwa', 'Michika', 'Mubi North', 'Mubi South', 'Numan', 'Shelleng', 'Song', 'Toungo', 'Yola North', 'Yola South'];


    jQuery(window).on('load', function() {
      $("#state").change(function() {
        var state = $(this).val();
        var lga = eval(state);
        $("#lga").html("");
        lga.forEach(function(text){
          $("#lga").append(`<option value="${text}">${text}</option>`);
        });
      })
    });

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <select name="state" id="state">
      <option selected="selected">Select item...</option>
      <option value='Abia'>Abia</option>
      <option value='Adamawa'>Adamawa</option>
    </select>
    <select name="lga" id="lga">
    </select>

Answer 3

这是您要实现的目标吗？

var Abia = ['Select item...', 'Aba North', 'Aba South', 'Arochukwu', 'Bende', 'Ikwuano', 'Isiala Ngwa North', 'Isiala Ngwa South', 'Isuikwuato', 'Obi Ngwa', 'Ohafia', 'Osisioma', 'Ugwunagbo', 'Ukwa East', 'Ukwa West', 'Umuahia North', 'muahia South', 'Umu Nneochi'];

var Adamawa = ['Select item...', 'Demsa', 'Fufure', 'Ganye', 'Gayuk', 'Gombi', 'Grie', 'Hong', 'Jada', 'Larmurde', 'Madagali', 'Maiha', 'Mayo Belwa', 'Michika', 'Mubi North', 'Mubi South', 'Numan', 'Shelleng', 'Song', 'Toungo', 'Yola North', 'Yola South'];

jQuery(window).on('load', function() {
  $("#state").change(function() {
    $("#lga").empty();
    var state = $(this).val();
    var lga = eval(state);
    lga.forEach(function(element) {
      console.log(element);
      var o = new Option(element, element);
      $("#lga").append(o);

    });
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select name="state" id="state">
    <option selected="selected">Select item...</option>
    <option value='Abia'>Abia</option>
    <option value='Adamawa'>Adamawa</option>
</select>
<select name="lga" id="lga">
</select>