iT邦幫忙

4

(已解決)如何將 json 格式資料呈現在下拉式選單

小斑 2017-08-11 16:01:3819012 瀏覽

大家好,
我想將 json 格式資料呈現在下拉式選單中,
在點選下拉式選單後,就會自動帶出資料(資料的格式為 json ),
請高手幫忙,感激不盡~~~~~~/images/emoticon/emoticon41.gif

fillano iT邦超人 1 級 ‧ 2017-08-11 17:23:53 檢舉
onclick => ajax => innerHTML?
小魚 iT邦大師 1 級 ‧ 2017-08-11 19:08:40 檢舉
點選下拉選單自動帶出資料?
帶出自己的資料還是其他下拉的資料?
小斑 iT邦新手 3 級 ‧ 2017-08-12 01:59:46 檢舉
感謝回覆
我目前是用 onclick => ajax => innerHTML
有確認 JSON 資料可正常顯示在頁面中,
但無法呈現在下拉選單中,
我只要取 JSON 其中一個陣列的 value 到下拉選單
--
是用 GET 的方式帶出 RESTful API url 的 JSON 資料,
RESTful API url 和 下拉選單分別在兩個不同的 PHP
--
我的程式碼如下:
<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>&nbsp;請選擇 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>
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
2
Samと可樂快跑
iT邦高手 9 級 ‧ 2017-08-13 18:10:41
最佳解答

我覺得,淋淋總總的大家寫了一大堆,但我只專注看到二件事:
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>

我認為……這樣應該已經夠簡單了。

看更多先前的回應...收起先前的回應...
小魚 iT邦大師 1 級 ‧ 2017-08-13 20:10:59 檢舉

正在等你發言...

幹嘛等我發「鹽」?

小斑 iT邦新手 3 級 ‧ 2017-08-14 14:42:40 檢舉

非常感謝可樂分享的講解和sample code,我會再試試看/images/emoticon/emoticon41.gif

請問如果後端用List取得資料後,也能使用在這裡的select嗎

0
石頭
iT邦高手 1 級 ‧ 2017-08-11 18:00:37

看一看合不合用

連結

看更多先前的回應...收起先前的回應...
小斑 iT邦新手 3 級 ‧ 2017-08-12 02:05:19 檢舉

非常感謝/images/emoticon/emoticon41.gif
但我的 JSON 資料是在另一個 PHP 檔,
是透過 RESTful API url 取得,
我有確認 JSON 資料已可正常顯示在頁面中,
但還無法呈現在另一個 PHP 檔的下拉選單中,
我只要取 JSON 其中一個陣列的 value 到下拉選單,
目前是用 onclick => ajax => innerHTML

我的程式碼如下:

小斑 iT邦新手 3 級 ‧ 2017-08-12 02:06:12 檢舉
<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>&nbsp;請選擇 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>
石頭 iT邦高手 1 級 ‧ 2017-08-12 08:32:18 檢舉

請問 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>
小斑 iT邦新手 3 級 ‧ 2017-08-12 14:54:08 檢舉

非常感謝回覆/images/emoticon/emoticon41.gif
我的 result 是要綁定的 jsonData,請問我要如何把值塞入 Option 標籤中,組好的 Option tag 塞入 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下手?

小魚 iT邦大師 1 級 ‧ 2017-08-12 19:58:29 檢舉

我想應該是複製貼上吧。

小斑 iT邦新手 3 級 ‧ 2017-08-13 09:01:34 檢舉

我是新手,很多都還不太懂,請見諒/images/emoticon/emoticon16.gif

石頭 iT邦高手 1 級 ‧ 2017-08-13 09:28:49 檢舉

建議版大可以先去了解JQuery和JS基本語法

小斑 iT邦新手 3 級 ‧ 2017-08-13 14:36:43 檢舉

好的,謝謝/images/emoticon/emoticon41.gif

0
小魚
iT邦大師 1 級 ‧ 2017-08-12 07:41:23

你的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);
       }
    }
}
看更多先前的回應...收起先前的回應...
小斑 iT邦新手 3 級 ‧ 2017-08-12 15:14:23 檢舉

非常感謝回覆/images/emoticon/emoticon41.gif

我目前 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>
小魚 iT邦大師 1 級 ‧ 2017-08-12 19:57:02 檢舉

照我上面那個範例,
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的內容了。

小斑 iT邦新手 3 級 ‧ 2017-08-13 08:59:29 檢舉

謝謝小魚的細心講解/images/emoticon/emoticon41.gif
其實我是新手,所以很多都還不太懂,請見諒/images/emoticon/emoticon16.gif
我照著您上面的說明做,還是不行,我發現好像是沒辦法抓到資料,程式碼如下,按下下拉選單網頁沒有彈出 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>&nbsp;請選擇 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>
小魚 iT邦大師 1 級 ‧ 2017-08-13 11:48:13 檢舉

你的程式有點怪,這個例子應該是直接先抓好資料再套進去select就好了,
會用到ajax通常是必須要動態改變的情況下,
譬如說選擇了某個城市(如台北市)之後,會動態改變另一個下拉的內容(如松山區等)才會需要用到ajax,
你的例子應該不需要用到ajax...

小斑 iT邦新手 3 級 ‧ 2017-08-13 14:55:25 檢舉

好的,我把 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>
小魚 iT邦大師 1 級 ‧ 2017-08-13 16:10:35 檢舉

select那邊不要呼叫checkSelectCname了,而且你這樣寫抓到的也不是php的$res,
應該要寫

<?php $res; ?>

(是這樣寫吧,我php不熟?)
你的事件可以放在script中,
如果是用jQuery的話,
可以用

<script>
$(document).ready(checkSelectCname(<?php $res; ?>));
function checkSelectCname($res) {
   ...
}
</script>

這樣子試試看吧,select不要再觸發什麼事件了...
(除非說這是作業,一定要這樣做...)

小斑 iT邦新手 3 級 ‧ 2017-08-14 14:40:20 檢舉

謝謝小魚這麼細心的一直回答我,我會再試試看/images/emoticon/emoticon41.gif

我要發表回答

立即登入回答