jQuery之Ajax建立Select選項框

通過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;