如何利用 jquery 將從後端取得的資料賦予 select?

js jquery

火爆浪子 2020-10-15 17:35:21 ‧ 5936 瀏覽

分享至

先不說為什麼用 jquery 了⋯⋯。

假設有選項資料是可以從後端取得的

<select class="select" name="who">
    <option value="">1</option>
</select>

我該怎麼「正確」地將資料丟到 select 給使用者選？
以及下次讀使用者的資料，選中的那個自動 selected
我想到如果是普通 input 欄位就 $('#xxx').val(val) 把直丟進去就可以了（？
有比較正確的做法嗎？
或是相關教學
謝謝

archer9080 iT邦研究生 3 級 ‧ 2020-10-15 18:09:30 檢舉

$('#xxx').append($("<option></option>").attr("value", "").text("全部"))
試試

火爆浪子 iT邦研究生 1 級 ‧ 2020-10-16 10:14:26 檢舉

嗯，我確實是用這個方式。

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

shan33

iT邦新手 1 級 ‧ 2020-10-15 19:56:58

最佳解答

增加option做法，這篇文章有列出三種
How to add options to a select element using jQuery?

// 作法一 
   $('#select1').append(`<option value="${optionValue}">${optionText}</option>`); 

// 作法二 使用new Option()
   $('#select1').append(new Option(optionText, optionValue)); 

// 作法三 利用val()和text()
   $('#select1').append($('<option>').val(optionValue).text(optionText));

讓option為selected
參考stackoverflow:Setting the selected attribute on a select list using jQuery

// 使用attr()
    $("select option[value='xxx']").attr("selected","selected");

回應 2
分享
檢舉

火爆浪子 iT邦研究生 1 級 ‧ 2020-10-16 10:13:15 檢舉

嗯我後來發問後直接先自己做了「作法一」，可行～
好奇其他「符合邏輯」的作法。

火爆浪子 iT邦研究生 1 級 ‧ 2020-10-16 10:27:00 檢舉

第二個感覺比較乾淨。

登入發表回應

japhenchen

iT邦超人 1 級 ‧ 2020-10-16 10:11:33

．．．．．．．．．．汗．．．．．.我自刪，回錯地方了

回應 1
分享
檢舉

japhenchen iT邦超人 1 級 ‧ 2020-10-16 10:13:51 檢舉

....

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22195 篇

完賽人數

600 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙