大家好，
我想將 json 格式資料呈現在下拉式選單中，
在點選下拉式選單後，就會自動帶出資料(資料的格式為 json )，
請高手幫忙，感激不盡~~~~~~
已邀請的邦友 {{ invite_list.length }}/5
我覺得，淋淋總總的大家寫了一大堆，但我只專注看到二件事：
1.JSON
2.呈現
基於這二點，我就只提供單純的sample code。
不管你的來源是什麼，既然你都知道他是JSON格式那不管如何宣告出來的東西就都無所謂。
只要他的重點是JSON就好。
再來就是怎麼「弄到畫面上」。
也就只是這樣，所以好好理解一下sample code。
以及記得：既然都用了jQuery就不要硬寫原生js來找自己的麻煩。
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
請選擇<select id="myselect"></select>
</body>
<script>
var datas = [
{title:'台北',value:'taipei'},
{title:'台中',value:'taichung'},
{title:'台南',value:'tainan'},
{title:'高雄',value:'kaohsiung'},
];
$(function(){
datas.map(function(data){
$('#myselect').append('<option value="'+ data.value +'">' + data.title + '</option>');
});
});
</script>
</html>
我認為……這樣應該已經夠簡單了。
看一看合不合用
我的程式碼如下：
<script>
function checkSelectCname() {
$.ajax({
type: "GET",
url: 'selectSttApi.php',
dataType: "json",
success:function(result) {
document.getElementById('cnameList').innerHTML = result;
}
});
}
</script>
<form method="get">
<span class="glyphicon glyphicon-hand-right">
<font face="微軟正黑體" size="3"><b> 請選擇 CustomerName：</b>
<select id="cnameList" style="cursor:pointer;width:180px" name="Cname" onclick="javascript:checkSelectCname()">
<optgroup selected="false" label="CustomerName">
<option > </option>
</select>
</font>
</span>
</form>
請問 success:function(result) 的Result是要綁定的jsonData嗎?
如果是就不能使用 innerHTML 直接把Json塞入標籤內
而是要把值塞入Option標籤中 組好的Option tag塞入select標籤上
你目前可能是以下這樣
<select>
{"Yilan":"宜蘭","Taipei":"台北","Hualien":"花蓮"}
</select>
但是要給瀏覽器引擎識別須為
<select>
<option value="Yilan">宜蘭</option>
<option value="Taipei">台北</option>
<option value="Hualien">花蓮</option>
</select>
我目前 jsonData 顯示在網頁上大概是以下這樣，我只要取 Cname 這個陣列的值到下拉選單，然後取 CustomerID 這個陣列的值做為 Option 的 value
{
"CustomerID":[1,2,3],
"Cname":["小花","小明","小平"],
其它Data...
"status":0,
"message":"success"
}
希望是像這樣
<select>
<option value="1">小花</option>
<option value="2">小明</option>
<option value="3">小平</option>
</select>
我挺好奇的…你都已經在用jquery了
為什麼會不知道怎麼組？
還是說，你覺得ajax比先搞清楚所謂的選擇器以及選擇器所提供的方法來得重要，所以你把選擇器的部份全部跳過直接就找了ajax下手？
我想應該是複製貼上吧。
你的success:function(result)沒有實作處理下拉選單的方法，
以下是我之前寫的，
稍微參考一下，
是針對一個Id名為car的下拉選單改變選項，
如果要找其他的你可以去搜尋 JavaScript 改變 下拉選單 之類的
success: function (data) {
var style = document.getElementById("car");
style.options.length = 0;
if (data == "") {
var varItem = new Option("請選擇", "");
style.options.add(varItem);
}
else {
var jo = JSON.parse(data);
var varItem = new Option("請選擇", "");
style.options.add(varItem);
for (i = 0; i < jo.length; i++) {
var item = new Option(jo[i].name, jo[i].id);
style.options.add(item);
}
}
}
我目前 jsonData 顯示在網頁上大概是以下這樣，我只要取 Cname 這個陣列的值到下拉選單，然後取 CustomerID 這個陣列的值做為 Option 的 value
{
"CustomerID":[1,2,3],
"Cname":["小花","小明","小平"],
其它Data...
"status":0,
"message":"success"
}
希望是像這樣
<select>
<option value="1">小花</option>
<option value="2">小明</option>
<option value="3">小平</option>
</select>
照我上面那個範例，
jo[i].name改成jo[i].Cname
jo[i].id改成jo[i].CustomerID
試試看，
另外select要給他一個id比較好抓到select，
(我上面那個例子是用id抓到select)
你試看看上面的方式行不行，
如果不行你看看是不是jo[i].Cname沒辦法抓到資料，
因為每個人組出來的Json格式會有點不大一樣，
所以也有兩種以上讀Json的方法，
那你要去網路上找看看JavaScript抓Json資料的其他方式，
主要是要能夠抓的到資料就能夠改變select的內容了。
謝謝小魚的細心講解
其實我是新手，所以很多都還不太懂，請見諒
我照著您上面的說明做，還是不行，我發現好像是沒辦法抓到資料，程式碼如下，按下下拉選單網頁沒有彈出 alert，也有試著網路上找資料，但還是無法解決，可以再麻煩您提點嗎？感激
<script>
function checkSelectCname() {
$.ajax({
type: "GET",
url: 'selectSttApi.php',
dataType: "json",
success:function(result) {
alert("SUCCESS!!!");
},
error: function() {
alert("ERROR!!!");
}
});
}
</script>
<form method="get">
<span class="glyphicon glyphicon-hand-right">
<font face="微軟正黑體" size="3"><b> 請選擇 CustomerName：</b>
<select id="cnameList" style="cursor:pointer;width:180px" name="Cname" onclick="javascript:checkSelectCname()">
<optgroup selected="false" label="CustomerName">
<option > </option>
</select>
</font>
</span>
</form>
你的程式有點怪，這個例子應該是直接先抓好資料再套進去select就好了，
會用到ajax通常是必須要動態改變的情況下，
譬如說選擇了某個城市(如台北市)之後，會動態改變另一個下拉的內容(如松山區等)才會需要用到ajax，
你的例子應該不需要用到ajax...
好的，我把 ajax 拿掉，也將兩個 PHP 檔合在一起，程式如下，在 echo $res 這行可抓到 jsonData，但我寫到 script 裡，好像就抓不到了，還請您指點，感激不盡
<?php
set_time_limit(0);
$url="我的URL";
$content=array();
$error = 0;
$res=PostFunction($url,$content,$error);
echo $res."<br>";
$JsonArray=json_decode($res);
$status=$JsonArray->status;
if ($status == 0 && $error == 0){
$response=$JsonArray->response;
echo $response;
}
function PostFunction($url,$postData,&$errorNo,$api_key=""){
$ch = curl_init();
curl_setopt( $ch, CURLOPT_URL, $url);
curl_setopt( $ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt( $ch, CURLOPT_HTTPHEADER, array("Authorization: $api_key"));
curl_setopt( $ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_TIMEOUT_MS, 30000);
$result = curl_exec($ch);
$errorNo = curl_errno($ch);
return $result;
}
?>
<script>
function checkSelectCname($res) {
var style = document.getElementById("cnameList");
style.options.length = 0;
if ($res == "") {
var varItem = new Option("請選擇", "");
style.options.add(varItem);
}
else {
var jo = JSON.parse($res);
var varItem = new Option("請選擇", "");
style.options.add(varItem);
for (i = 0; i < jo.length; i++) {
var item = new Option(jo[i].Cname, jo[i].CustomerID);
style.options.add(item);
}
}
}
</script>
<form method="get">
<span class="glyphicon glyphicon-hand-right">
<font face="微軟正黑體" size="3"><b> 請選擇 CustomerName：</b>
<select id="cnameList" style="cursor:pointer;width:180px" name="Cname" onclick="javascript:checkSelectCname($res)">
<optgroup selected="false" label="CustomerName">
<option > </option>
</select>
</font>
</span>
</form>
select那邊不要呼叫checkSelectCname了，而且你這樣寫抓到的也不是php的$res，
應該要寫
<?php $res; ?>
(是這樣寫吧，我php不熟?)
你的事件可以放在script中，
如果是用jQuery的話，
可以用
<script>
$(document).ready(checkSelectCname(<?php $res; ?>));
function checkSelectCname($res) {
...
}
</script>
這樣子試試看吧，select不要再觸發什麼事件了...
(除非說這是作業，一定要這樣做...)
謝謝小魚這麼細心的一直回答我，我會再試試看
iThome鐵人賽
看影片追技術