1

我使用谷歌应用程序脚本制作了一个网络应用程序并将其部署在网络上。该应用程序在 PC 上运行良好，但是当我将其加载到 android 上的 webview 时，<select>不会显示动态填充的菜单（它们是空的）。

我知道 google caja 对 jquery mobile 有问题，所以我不能使用 jquery mobile。

问题是是否有一种方法可以使<select>菜单仅使用 jquery 或 javascript 工作？或者也许我可以在android中做一些技巧？

这是我如何使用 jquery 填充菜单的示例：

function addClients(clients){   //array of options from google spreadsheets.
  $('#client').empty();
  for (var i in clients) {
    $('#client').append('<option>'+clients[i]+'</option>');
    $('#client').trigger("chosen:updated");
  }
}

HTML部分：

<select name="client" id="client" data-native-menu="true" data-role="none">
    <option> ---- Choose a client ----</option>
</select>

安卓部分：

WebView myWebView  = (WebView) findViewById(R.id.webView1);
myWebView.loadUrl("--- my web app's URL here ---");
myWebView.setWebChromeClient(new WebChromeClient());

WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

先感谢您。

编辑：

看起来菜单不令人耳目一新。一开始我有一个内置选项：

<option> ---- Choose a client ----</option>

这个选项在 jquery 部分被删除，但是菜单没有更新，它保持为空。

我已经尝试过没有积极的结果：

$('#client').trigger("chosen:updated");

$('select').selectmenu('refresh');

$('#client').hide();
$('#client').show();

$('select#client').selectmenu('refresh');
4

2 回答 2

1

我解决了这个问题。我所做的是注释了清空选择菜单并出于我的目的使用 jquery ui 的行：

function addClients(clients){   //array of options from google spreadsheets.
  //$('#client').empty(); ---------- I commented this.
  for (var i in clients) {
    $('#client').append('<option>'+clients[i]+'</option>');
   // $('#client').trigger("chosen:updated"); ------- This line is also removed
  }
$(function() {  // And added jquery ui select menu
  $( "#client" ).selectmenu();
  });
}

这完成了工作。我不知道为什么...

于 2014-08-02T10:33:34.843 回答
0

简短的回答：是的，这是绝对可能的。（几乎）jQuery 所做的一切都在后台使用原生 HTML/CSS/JavaScript 功能。作为一个框架，它的存在只是为了让你的编码更快更容易。

假设您选择的 id 为“client”，您可以使用var selectClient = document.getElementById("client");.

我不知道您从哪里获得选项（手动输入，或通过 PHP API 调用加载，或从数据库等），所以我假设您可以访问您想要的选项添加。

可以通过使用向客户端添加选项

selectClient.innerHTML += "<option>My option here</option>";

“innerHTML”属性基本上包含 和 之间的所有<select>内容</select>。

如果您想在添加新选项之前删除现有选项，只需先将 innerHTML 设置为空的 "" 字符串。如果您想编辑特定的选项标签，您需要使用任何本机或 jQuery 方法来查找标签（或者如果您将 ID 添加到选项，则使用 ID）来选择选项。

希望这可以帮助。

PS 这个解决方案是纯 JavaScript，但如果平台支持，你当然可以使用任何等效的 jQuery 函数。该innerHTML属性的 jQuery 等效项是html()，如$("#client").html("<option>Foo Bar</option>");

编辑 04-08-2014：事实证明 OP 没有使用他正在调用的事件的插件（为 jQuery 选择），但上述步骤仍然正确并且仍然适用（如果不使用选择）。

于 2014-08-01T09:22:42.183 回答