заполнение выпадающего меню с помощью 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-файл. Если они связаны с выпадающим элементом, я предлагаю в качестве атрибута.

пример:

<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>"); 
    }); 
});

Следует заметить, что вы, вероятно, может упростить и ускорить работу JQuery, как это (непроверенные):

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

ОБНОВЛЕНИЕ

Для другого важного повышения производительности сделайте только одно append(), а не столько append(), сколько у вас есть «make».

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

Не уверен, что на самом деле то, что вы просите, но вы могли бы сделать один из двух вещей.

Имейте переменную count в javascript и каждый раз, когда вы добавляете опцию, увеличивайте эту переменную. Используйте это число как «значение», и оно будет соответствовать его «точке» в XML.

Или в XML делать каждый "делать", как это:

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

и использовать идентификатор.

Не уверен, что вы действительно хотите, но не знаете, поможет ли это.

источник

2010-08-14 22:29:28

Ну, я думал об этом, но значения не являются последовательными, например Dodge может иметь значение 300, в то время как Audi может иметь значение 13, поэтому ему пришлось вытащить значение из xml-файла для каждого make – user357034

. Я все еще не уверен что вы пытаетесь сделать. Вы постоянно обновляете и редактируете XML самостоятельно? –

заполнение выпадающего меню с помощью xml-файла

ответ

Смежные вопросы