如何在页面加载时加载我的第二个动态下拉列表？

Question

我有一个由两个下拉列表组成的动态下拉菜单。

当页面加载时，第二个下拉列表是空的，但是我希望默认显示两个列表。请参阅http://jazzkatt.net/dynamic/ 来说明我的问题。

这是我的代码：

<script>
  $(function() {

    $("#json-one").change(function() {
    var $dropdown = $(this);
      $.getJSON("jsondata/data.json", function(data) {
        var key = $dropdown.val();
        var vals = [];

        switch(key) {
          case 'norway':
          vals = data.norway.split(",");
        break;
          case 'usa':
          vals = data.usa.split(",");
        break;
          case 'denmark':
          vals = data.denmark.split(",");
        }

        var $jsontwo = $("#json-two");
        $jsontwo.empty();
        $.each(vals, function(index, value) {
        $jsontwo.append("<option>" + value + "</option>");
        });

      });
    });
  });
</script>

这是我用来显示下拉列表的 HMTL 代码：

    <select id="json-one">
        <option selected value="norway">Norway</option>
        <option value="usa">USA</option>
        <option value="denmark">Denmark</option>
    </select>

    <br />

    <select id="json-two">

    </select>

提前致谢。

Answer 1

您必须在文档准备好时触发第一个下拉菜单。 所以请进行这些更改

$(document).ready(function(){ // Change 1

    $("#json-one").change(function() {
    var $dropdown = $(this);
      $.getJSON("jsondata/data.json", function(data) {
        var key = $dropdown.val();
        var vals = [];

        switch(key) {
          case 'norway':
          vals = data.norway.split(",");
        break;
          case 'usa':
          vals = data.usa.split(",");
        break;
          case 'denmark':
          vals = data.denmark.split(",");
        }

        var $jsontwo = $("#json-two");
        $jsontwo.empty();
        $.each(vals, function(index, value) {
            $jsontwo.append("<option>" + value + "</option>");
        });

      });
    });

    $("#json-one").trigger('change'); // Change 2
  });

Answer 2

你可以触发change事件，例如：

$(function() {

    $("#json-one").change(function() {
    var $dropdown = $(this);
      $.getJSON("jsondata/data.json", function(data) {
        var key = $dropdown.val();
        var vals = [];

        switch(key) {
          case 'norway':
          vals = data.norway.split(",");
        break;
          case 'usa':
          vals = data.usa.split(",");
        break;
          case 'denmark':
          vals = data.denmark.split(",");
        }

        var $jsontwo = $("#json-two");
        $jsontwo.empty();
        $.each(vals, function(index, value) {
        $jsontwo.append("<option>" + value + "</option>");
        });

      });
    }).change(); //<< trigger change event
  });

Answer 3

由于您有逻辑来检查更改事件中选择的国家/地区，因此仅当从下拉列表中选择一个值时才会触发它。我可能建议的一种快速解决方案是将相同的逻辑放在 document.ready 事件上。

$(document).ready(function() {
    //load the city based on country selected
});

希望这能给你一个起点

Answer 4

第二个列表仅在第一个列表（“#json-one”）发生变化时生成。

如果您想在页面加载时生成第二个列表，您需要在您的 init 函数中执行此操作。

  $(function() {
  $.getJSON("jsondata/data.json", function(data) {
    var key = $("#json-one").val()
    var vals = [];

   switch(key) {
      case 'norway':
      vals = data.norway.split(",");
    break;
      case 'usa':
      vals = data.usa.split(",");
    break;
      case 'denmark':
      vals = data.denmark.split(",");
    }

   var $jsontwo = $("#json-two");
    $jsontwo.empty();
    $.each(vals, function(index, value) {
    $jsontwo.append("<option>" + value + "</option>");
    });

 });

Answer 5

这太容易了。只需将您的代码替换为以下代码即可。

< script >

  $(document).ready(function() {

    function getJsonOneDropdownSelectedValue() {

      return $("#json-one").val();
    }

    function populateJosnTwoDropdown() {
      $.getJSON("jsondata/data.json", function(data) {
        var key = getJsonOneDropdownSelectedValue();
        var vals = [];

        switch (key) {
          case 'norway':
            vals = data.norway.split(",");
            break;
          case 'usa':
            vals = data.usa.split(",");
            break;
          case 'denmark':
            vals = data.denmark.split(",");
        }

        var $jsontwo = $("#json-two");
        $jsontwo.empty();
        $.each(vals, function(index, value) {
          $jsontwo.append("<option>" + value + "</option>");
        });

      });
    }

    // populate json two dropdown on the basic of json one
    populateJosnTwoDropdown();

    // register change event of json one dropdown
    $("#json-one").change(populateJosnTwoDropdown);

  });


< /script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="json-one">
  <option selected value="norway">Norway</option>
  <option value="usa">USA</option>
  <option value="denmark">Denmark</option>
</select>

<br />

<select id="json-two">

</select>