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

您可以触发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 2

文档准备好后，您必须触发第一个下拉列表。所以请进行这些更改

$(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 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

太容易了。只需用下面的代码替换您的代码即可。

＆＃13;

< 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>

＆＃13;

<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>

＆＃13;

如何在pageload上加载我的第二个动态下拉列表？

5 个答案: