xml 파일로 드롭 다운 메뉴 채우기

다음 코드는 드롭 다운 메뉴를 채우기 위해 xml 파일을로드합니다. 값은 옵션 텍스트와 동일하지만 같은 xml 파일에서 오는 값과 동일한 값을 갖고 싶습니다. 누군가가 XML 파일을 포맷하는 방법과 html 코드에 값을 표시하기 위해 추가 할 코드를 알려주시겠습니까? xml 파일로 드롭 다운 메뉴 채우기

<!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" /> 
<link rel="stylesheet" type="text/css" media="all" href="style.css" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
<title>Using jQuery and XML to populate a drop-down box demo</title> 
<script> 
$(document).ready(function(){ 
$.ajax({ 
type: "GET", 
url: "make.xml", 
dataType: "xml", 
success: function(xml) { 
var select = $('#mySelect'); 

$(xml).find('dropdown').each(function(){ 
$(this).find('make').each(function(){ 
var value = $(this).text(); 
select.append("<option class='ddindent' value='"+ value +"'>"+value+"</option>"); 
}); 
}); 
select.children(":first").text("Select Make").attr("selected",true); 
} //sucess close 
}); 
}); 
</script> 
</head> 
<body> 
<div id="page-wrap"> 
<select id="mySelect"> 
<option>loading</option> 
</select> 
</div> 
</body> 
</html>

이

는 XML 파일

<?xml version="1.0" encoding="iso-8859-1"?> 

<dropdown> 
<make>Acura</make> 
<make>Aston Martin</make> 
<make>Audi</make> 
<make>Bently</make> 
<make>BMW</make> 
<make>Buick</make> 
<make>Cadillac</make> 
<make>Chevrolet</make> 
<make>Chrylser</make> 
<make>Dodge</make> 
<make>Eagle</make> 
<make>Ferrari</make> 
<make>Ford</make> 
<make>Geo</make> 
<make>GMC</make> 
<make>Honda</make> 
<make>Hummer</make> 
<make>Hyundai</make> 
<make>Infiniti</make> 
<make>Isuzu</make> 
<make>Jaguar</make> 
<make>Jeep</make> 
</dropdown>

출처

2010-08-14 user357034

xml 파일의 숫자는 어디에 있습니까? – pixeline

그건 내 질문이다. 어떻게 포맷 하겠는가? – user357034

먼저 xml 파일에 숫자를 넣어 시작하십시오. 드롭 다운 항목과 관련된 경우 속성으로 제안합니다.

예 :

당신의 JQuery와 루프에서 다음

<dropdown> 
    <make value="1">Acura</make> 
    <make value="4">Aston Martin</make> 
    <make value="34">Audi</make> 
... 
</dropdown>

: 당신은 아마 단순화하고 같은 (테스트되지 않은) 당신의 jQuery를 빠르게 할 수

$(xml).find('dropdown').each(function(){ 
    $(this).find('make').each(function(){ 
      var value = $(this).attr('value'); 
      var label = $(this).text(); 
      select.append("<option class='ddindent' value='"+ value +"'>"+label+"</option>"); 
    }); 
});

참고 :

$('make', xml).each(function(){ 
       var value = $(this).attr('value'); 
       var label = $(this).text(); 
       select.append("<option class='ddindent' value='"+ value +"'>"+label+"</option>"); 
    });

업데이트

또 다른 중요한 성능 향상을 위해 "만들기"노드만큼 append()하지 말고 하나만 추가하십시오.

var optionsHtml = new Array(); 
    $('make', xml).each(function(){ 
        var value = $(this).attr('value'); 
        var label = $(this).text(); 
optionsHtml.push("<option class='ddindent' value='"+ value +"'>"+label+"</option>"); 

     }); 
optionsHtml = optionsHtml.join(''); 
select.append(optionsHtml);

출처

2010-08-14 22:32:31 pixeline

그건 아주 간단하고 훌륭했습니다! 고마워!!! – user357034

내 기쁨. 추가적인 성능 트릭이 있습니다. 각 반복() 반복마다 노드를 추가하고 있습니다. 노드가 많으므로 성능 측면에서 비용이 많이 듭니다. 배열에 html을 저장 한 다음 배열을 결합하고 추가를 수행하는 것이 좋습니다. – pixeline

이 성능 향상 구현에 대한 답변이 업데이트되었습니다. – pixeline

하지 정말 당신이 무엇을 요구해야합니다,하지만 당신은 한 두 가지의 할 수있다.

자바 스크립트에 개수 변수가 있고 옵션을 추가 할 때마다이 변수가 증가합니다. 이 숫자를 "값"으로 사용하면 XML의 "포인트"에 해당합니다.

<make> 
    <id>1</id> 
    <name>Ford</name> 
</make>

을하고 ID를 사용

또는 XML의

는 각각 다음과 같이 "확인"할.

당신이 정말로 원하는 것이 무엇인지 확실하지 않으므로 이것이 도움이되는지 잘 모릅니다.

출처

2010-08-14 22:29:28

음, 생각했는데 값이 순차적이지 않은 경우 도지는 300의 값을 가질 수 있지만 Audi는 13의 값을 가질 수 있으므로 각 xml 파일에서 값을 가져와야합니다. – user357034

아직 확실하지 않습니다. 당신이하려는 일. XML을 지속적으로 업데이트하고 편집하고 있습니까? –

xml 파일로 드롭 다운 메뉴 채우기

답변

관련 문제