Question

我制作了一个包含2个链接选择控件的脚本：第一个是由提供给所有汽车制造商的SQLite数据填充的，第二个选择控件应该根据第一个选择控件的状态填充汽车模型。我知道如何编写代码来读取和填充选择控件，但我不能将第一次选择的初始状态设置为0，同时设置第二次选择的初始状态。我尝试了很多技巧，但即使选择控件也正确填充总是显示为空！我试过了：

<select id="sel_manufacturer" onchange="checkMe(); return false;">
</select>

<select id="sel_model">
</select>

 //code (part):       
$('#sel_manufacturer').selectmenu();
$(document).on('pageinit', "#pocetna", function() {
    fillManufacturers(); //open, read Sqlite and populate first select control
});
...
//at end of  the function is code:
var select = document.getElementById("sel_manufacturer");
if (typeof(select.onchange) == "function") select.onchange();
...
function checkMe {
    document.getElementById('sel_manufacturer').selectedIndex=1;
    $('#sel_manufacturer').selectmenu('refresh', true);
}

但是在测试期间检查GC控制台提到的选择不会出现任何选定的选项！我试图将'pageinit'更改为'pageshows'，但没有得分。但是当有带硬编码选项的选择控件时，checkMe（）函数的代码正常工作，直接在脚本中！有可能实现吗？脚本基于jQ 11.1.1＆amp; jQM 1.4.5。谢谢。

Answer 1

我认为这只是数据库异步响应的问题，无论如何，下面你会发现一个带有来自ajax占位符的链式异步调用的例子。您可以将用户替换为“manufacturer *和 todos models ，但原则是相同的。

function getToDo(id) {
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/todos?id=" + id,
    method: 'GET',
    crossDomain: true,
    dataType: "jsonp",
    beforeSend: function() {
      $.mobile.loading("show");
    },
    success: function(todos) {
      $("#todo-id span").text(todos[0].id);
      $("#todo-title span").text(todos[0].title);
      $("#todo-status span").text(todos[0].completed ? "Closed" : "Open");
    },
    complete: function() {
      $.mobile.loading("hide");
    }
  });
}

function getToDos(userId) {
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/todos?userId=" + userId,
    method: 'GET',
    crossDomain: true,
    dataType: "jsonp",
    beforeSend: function() {
      $.mobile.loading("show");
    },
    success: function(todos) {
      var options = "";
      $.each(todos, function(index, todo) {
        options += '<option value="' + todo.id + '">' + todo.title + '</option>';
      });
      $("#select-todos")
        .html("")
        .append(options)
        .selectmenu("refresh", true);
    },
    complete: function() {
      $.mobile.loading("hide");
    }
  }).then(function() {
    $("#select-todos").trigger("change");
  });
}

function getUsers() {
  $.ajax({
      url: "https://jsonplaceholder.typicode.com/users",
      method: 'GET',
      crossDomain: true,
      dataType: "jsonp",
      beforeSend: function() {
        $.mobile.loading("show");
      },
      success: function(users) {
        var options = "";
        $.each(users, function(index, user) {
          options += '<option value="' + user.id + '">' + user.name + '</option>';
        });
        $("#select-users")
          .append(options)
          .selectmenu("refresh", true);
      },
      complete: function() {
        $.mobile.loading("hide");
      }
    })
    .then(function() {
      $("#select-users").trigger("change");
    });
}

$(document).on("pagecreate", "#choice-select", function(e, ui) {
  $("#select-users").change(function() {
    getToDos($(this).val());
  });
  $("#select-todos").change(function() {
    getToDo($(this).val());
  });
  getUsers();
});

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
  <div data-role="page" id="choice-select">
    <div data-role="content" role="main">
      <div class="ui-field-contain">
        <label for="select-users">Users:</label>
        <select name="select-users" id="select-users" data-native-menu="false">
        </select>
      </div>
      <div class="ui-field-contain">
        <label for="select-todos">To-Do's:</label>
        <select name="select-todos" id="select-todos" data-native-menu="false">
        </select>
      </div>
      <br>
      <div>ToDo detail:</div>
      <hr>
      <div id="todo-id">Id: <span></span></div>
      <div id="todo-title">Title: <span></span></div>
      <div id="todo-status">Status: <span></span></div>
    </div>
  </div>
</body>

</html>

附加说明：如果您需要空的初始选择，则可以向option添加一个空的select，例如id=-1，并打破非id的级联请求链 - 存在{{1}} s。

此外，根据模型列表的大小，您可以使用其他缓存机制进一步扩展上述模板，以避免对已加载的数据进行双重数据库提取。

希望这有帮助！

jQM：如何设置从Sqlite填充的select的初始状态

1 个答案: