Question

我在网页上显示两个列表：（客户名单）（项目清单）

当用户在客户列表中更改其选择时，我重新填充项目列表。我对php / mysql进行jquery调用以获取与此客户端相关的项目，然后使用此数据为客户端<select>设置选项。遗憾的是，更改项目<select>元素的列表内容不会导致此元素的显示更改，就像设置文本元素的innerHTML一样。

我可以强制页面刷新，一切看起来都很好，但我不想刷新页面。有没有办法让<select>元素重绘？

这是一组有问题的HTML / javascript。在函数BuildProjectList（）的底部，可以看到我尝试通过设置innerHTML或构建选项列表以两种方式填充项目列表。在任何一种情况下，当我更改其内容以响应客户端列表中的选择更改时，项目列表的显示不会更新。但是，如果在此之后您更改项目列表中的选择，则显示会更新，您可以验证项目列表的基础数据实际上是否已更改。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test List ....</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript">
function BuildClientList()
{
    var uiEl = document.getElementById('uidCl');
    var aUidClient = new Array(3);

    aUidClient[0] = ['101', 'Client 1'];
    aUidClient[1] = ['102', 'Client 2'];
    aUidClient[2] = ['102', 'Client 3'];

    uiEl.options.length = 0;
    var cClient = aUidClient.length;
    for (iRow = 0; iRow < cClient; iRow++)
    {
        uiEl.options[iRow] = new Option(aUidClient[iRow][1], aUidClient[iRow][0]);
    }
}

function BuildProjectList()
{
    iClient = document.getElementById('uidCl').selectedIndex;
    var uiEl = document.getElementById('uidPr');
    var aUidProject = new Array(3);
    switch (iClient)
    {
        case 0:
        aUidProject[0] = ['101', '1Project 1'];
        aUidProject[1] = ['102', '1Project 2'];
        aUidProject[2] = ['103', '1Project 3'];
        break;
        case 1:
        aUidProject[0] = ['201', '2Project 1'];
        aUidProject[1] = ['202', '2Project 2'];
        aUidProject[2] = ['203', '2Project 3'];
        break;
        default:
        aUidProject[0] = ['301', '3Project 1'];
        aUidProject[1] = ['302', '3Project 2'];
        aUidProject[2] = ['303', '3Project 3'];
    }


    uiEl.options.length = 0;
    var cProject = aUidProject.length;
    var strInner = "";
    for (iRow = 0; iRow < cProject; iRow++)
    {
        uiEl.options[iRow] = new Option(aUidProject[iRow][1], aUidProject[iRow][0]);
        strInner += "<option value=\"" + aUidProject[iRow][0] + "\">" + 
            aUidProject[iRow][1] + "</option>";
    }
//  uiEl.innerHTML = strInner;
}

</script>
</head>
<body>
<div data-role="fieldcontain">
<input type="hidden" id="id_user_info" name="id_user_info" value="1" />
   <label for="s_client" class="select ui-hidden-accessible">Client...</label>
   <select data-overlay-theme="a" data-native-menu="false" name="uidCl" id="uidCl" onChange="BuildProjectList()">
<script type="text/javascript">
BuildClientList();
</script>
</select>


</div><div data-role="fieldcontain">
<input type="hidden" id="id_proj" name="id_proj" value="2" />
   <label for="s_proj" class="select ui-hidden-accessible">Project...</label>
   <select data-overlay-theme="a" data-native-menu="false" name="uidPr" id="uidPr" >
<script type="text/javascript">
BuildProjectList();
</script>
</select>
</div>
</body>
</html>

Answer 1

我找到了一种方法来使用jquery在列表中设置索引并刷新显示。下面的javascript函数显示了：

// set the index for a <select> element
function SetIndex(eid, i)
{
    var strEid = "#" + eid;
    var menuSelect = $(strEid);
    menuSelect[0].selectedIndex = i;
    menuSelect.selectmenu("refresh");
}

重新绘制第二个<select> </select>

1 个答案: