2012-10-20 25 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)   
    }); 

})