2012-10-20 82 views
0

我有应用程序,其中存在复选框树。我想在选中某些复选框之前预先填充复选框的用户。在HTML页面中显示XML内容以创建表单元素

对于这是从我的后端perl脚本获取XML格式,如下所示。像下面的XML只有0,43,44,45,46和50即将到来,所以只有那些相应的复选框需要在页面上检查我想通过调用perl脚本从黑色解析XMl在页面加载中显示这些选中的复选框。我可以这样做吗?

<perldata> 
<hashref memory_address="0x86f4880"> 
    <item key="0">1</item> 
</hashref> 
</perldata> 
<perldata> 
<hashref memory_address="0x86f4880"> 
    <item key="43">1</item> 
</hashref> 
</perldata> 
<perldata> 
<hashref memory_address="0x86f4880"> 
    <item key="44">1</item> 
</hashref> 
</perldata> 
<perldata> 
<hashref memory_address="0x86f4880"> 
    <item key="45">1</item> 
</hashref> 
</perldata> 
<perldata> 
<hashref memory_address="0x86f4880"> 
    <item key="46">1</item> 
</hashref> 
</perldata> 
<perldata> 
<hashref memory_address="0x86f4880"> 
    <item key="50">1</item> 
</hashref> 
</perldata> 
+0

复选框的ID是否与项目键相同? – Robyflc

+0

哪里的html匹配这个?你试过了什么?显示代码尝试 – charlietfl

回答

1

我读了平坦的XML文件,你会从你的PERL程序中读取。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script> 
    <script type="text/javascript"> 
    $(helloWorld) 
    function helloWorld() { 
     $.ajax({ 
      url: 'perldata.xml', 
      success: function(data) { 
       $('[key]',data).each(function(){ 
        $('#chk_'+$(this).attr('key')).prop('checked',true) 
       }) 
      } 
     }) 
    } 
    </script> 
    <title>perlData</title> 
</head> 
<body> 
<div id="message"> 
<form> 
<input id='chk_0' type='checkbox' />0<br /> 
<input id='chk_1' type='checkbox' />1<br /> 
<input id='chk_2' type='checkbox' />2<br /> 
<input id='chk_3' type='checkbox' />3<br /> 
<input id='chk_4' type='checkbox' />4<br /> 
<input id='chk_5' type='checkbox' />5<br /> 
<input id='chk_6' type='checkbox' />6<br /> 
<input id='chk_7' type='checkbox' />7<br /> 
<input id='chk_8' type='checkbox' />8<br /> 
<input id='chk_9' type='checkbox' />9<br /> 
<input id='chk_10' type='checkbox' />10<br /> 
<input id='chk_11' type='checkbox' />11<br /> 
<input id='chk_12' type='checkbox' />12<br /> 
<input id='chk_13' type='checkbox' />13<br /> 
<input id='chk_14' type='checkbox' />14<br /> 
<input id='chk_15' type='checkbox' />15<br /> 
</form> 
</div> 

</body> 
</html> 
1

这里有一个演示,使Ajax请求的XML和解析项键作为ID的复选框

回环演示: http://jsfiddle.net/592At/1/

$.get(pathToXmlFile, function(response) { 

    $(response).find('perldata').each(function(i) { 
     var itemKey = $(this).find('item').attr('key'); 
     $('#'+itemKey).prop('checked',true)   
    }); 

})