学步园

通过jQuery的Ajax与PHP交互，XML数据源动态创建Select选项框。

不多说，上菜：

Javascript：

/**<br /> * aAjax创建Select<br /> *<br /> * @return void<br /> */<br /> function aJax_category() {<br /> var obj = {};<br /> obj.mode = "city";<br /> $.ajax({<br /> type : "POST"<br /> , url : "ajax_category.php"<br /> //数据源为XML<br /> , dateType : "xml"<br /> , data : $.param(obj)<br /> , success : function (xml) {<br /> //删除原有Select<br /> $("select[name=category]").remove();</p> <p> /*xml为数据源<br /> <data><br /> <category><br /> <id>1</id><br /> <name>北京</name><br /> </category><br /> <category><br /> <id>2</id><br /> <name>上海</name><br /> </category><br /> <category><br /> <id>1</id><br /> <name>深圳</name><br /> </category><br /> </data><br /> */<br /> if ($("category", xml).text() != "") {<br /> //创建Select<br /> var category = $("<select>");<br /> $(category).attr("name", "category");<br /> $(category).css({"display" : "block", "width" : "120px", "margin-top" : "3px"});<br /> //new options(label,value)<br /> $(category)[0].options.add(new Option("请选择", ""));<br /> $("category", xml).each(function(){<br /> var id = $("id", this).text();<br /> var name = $("name", this).text();</p> <p> //创建options<br /> $(category)[0].options.add(new Option(name, id));<br /> });//each end<br /> //内部插入<br /> $("body").append(category);<br /> }//if end<br /> }//success end<br /> });//ajax</p> <p>}
 

PHP：

<?php<br /> /**<br /> * ajax获取XML数据源<br /> */<br /> var $xml = '<?xml version="1.0" encoding="UTF-8"?>';<br /> $items = '';<br /> switch($_POST['mode'];) {<br /> case 'city':<br /> $items = '<category><id>1</id><name>北京</name></category>'<br /> . '<category><id>2</id><name>上海</name></category>';<br /> break;<br /> default:break;<br /> }<br /> $xml .= "<data>{$items}</data>";<br /> header('Content-type: text/xml;charset=utf-8');<br /> echo mb_convert_encoding($xml,'UTF-8', 'AUTO');<br /> exit;