Question

我创建了两个选择框，一个依赖于另一个，选择一个＆＃34;用户＆＃34;你需要选择一个＆＃34;区域＆＃34;所以所有＆＃34;用户＆＃34;那个＆＃34;区域＆＃34;将在这样的＆＃34;区域＆＃34;被选中。它在不使用jQuery Mobile时非常有效，但是当我放置链接并对其进行测试时，它会锁定选项。为什么这样做？

任何帮助都将受到高度赞赏！

更新：奇怪的是，它实际上获得了它选择的选项AKA的价值！但它并没有“令人耳目一新”＃34;选择标记所选选项的文本。当选择为空时，在控制台上尝试$('#user').val();。

要查看错误，请在第一个选择框中选择Test，然后尝试在第二个选择框中选择user。

在此尝试：http://liveweave.com/1hOGCg

或

我的代码（尝试删除jQuery Mobile链接以查看它是否有效）：

＆＃13;

localStorage.setItem('dad', '[[1,"asdasd"],[2,"Test"]]');
localStorage.setItem('son', '[[1,1,"Test"],[10,1,"User213"],[2,1,"Test2"],[3,1,"Test3"],[4,1,"Test4"],[5,1,"Test5"],[6,1,"Testtesttest6"],[7,1,"Test7"],[8,1,"Test8"],[9,2,"User"]]');
var dadArray = (localStorage.getItem('dad') !== null) ? JSON.parse(localStorage.getItem('dad')) : '';
var sonArray = (localStorage.getItem('son') !== null) ? JSON.parse(localStorage.getItem('son')) : '';
var tempArray = '';

if (localStorage.getItem('dad') === null && localStorage.getItem('son') === null) {
  getData();
}

function getDad(dad, id) {
  var size = dad.length;
  for (var i = 0; i < size; i++) {
    $(id).append('<option value="' + dad[i][0] + '">' + dad[i][1] + '</option>');
  }
}

function getSon(son, id, dad) {
  var size = son.length;
  for (var i = 0; i < size; i++) {
    if (dad == son[i][1]) {
      $(id).append('<option class="area' + son[i][1] + '" value="' + son[i][0] + '">' + son[i][2] + '</option>');
    }
  }
}

$('#areas').change(function() {
  $('#user').empty();
  getSon(sonArray, '#user', $(this).val());
});

$(function() {
  getDad(dadArray, '#areas');
  $('#areas').change();
});

//If localStorage has been erased
/*
function getData(){
tempArray = $.ajax({
url: 'http://sistema.agrosys.com.br/webpro/webadm/wcgsynua',
async: false
});
tempArray = tempArray.responseText;
splitArray(tempArray,dadArray,sonArray);
}

function splitArray(array,dad, son){
var isItDad = true;
for(var i=0;i<array.length;i++){
var bit = array.substring(i, i+1);
if(bit == 's'){
if(array.substring(i, i+4) == 'son='){
isItDad = false; 
}
}
if(isItDad === true){
dad += bit;
}else{
son += bit;
}
}
dadArray = dad;
sonArray = son;
dadArray = dadArray.replace('dad=', '');
sonArray = sonArray.replace('son=', '');
dadArray = dadArray.replace(',[]', '');
sonArray = sonArray.replace(',[]', '');
dadArray = JSON.parse(dadArray);
sonArray = JSON.parse(sonArray);
}
*/
//If localStorage has been erased

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <title>iterateSelectBox</title>
</head>

<body>
  <select id="areas">
  </select>
  <select id="user">
  </select>
</body>

</html>

＆＃13;

Answer 1

修改选择后，您需要告诉jQM刷新小部件：

http://api.jquerymobile.com/selectmenu/#method-refresh

添加

$(id).selectmenu( "refresh", true );

在getDad（）和getSon（）

的末尾

function getDad(dad, id) {
  var size = dad.length;
  for (var i = 0; i < size; i++) {
    $(id).append('<option value="' + dad[i][0] + '">' + dad[i][1] + '</option>');
  }
  $(id).selectmenu( "refresh", true );
}

function getSon(son, id, dad) {
  var size = son.length;
  for (var i = 0; i < size; i++) {
    if (dad == son[i][1]) {
      $(id).append('<option class="area' + son[i][1] + '" value="' + son[i][0] + '">' + son[i][2] + '</option>');
    }
  }
  $(id).selectmenu( "refresh", true );
}

为什么jQuery Mobile选择框会锁定选项？

1 个答案: