js給下拉框如何設定預設值

2019-12-12 05:42:03

通過js給下拉框設定預設值，可以在頁面文件載入後，通過jquery設定下拉框的預設值，目的是簡化原生js的程式碼複雜性

開啟vscode，建立一個H5規範的頁面，用於演示js如何給下拉框設定預設值

在頁面中新增一個下拉框，並在html中通過selected屬性，預設選擇下拉框的第2個值

在瀏覽器中開啟頁面，就可以看到這個下拉框預設選中的第二個下拉值

在頁面頂部引入jquery，由於本文將jquery和頁面放在同一級目錄，所以，直接使用了jquery檔名參照。如果不在同一級目錄，引入的路徑需要有層級

在頁面底部，新增jquery程式碼，使用.val()方法，在頁面文件載入後，就馬上修改下拉框的預設選中值為第三個值。此時是不管html的標籤中selected屬性原來是標記在哪一個選項的，都會改成新的值

在瀏覽器中開啟頁面，這個時候就會看到，下拉框的預設值已經變成了第三個選項

如果想要通過下拉框的顯示值來設定預設選中項，就需要使用類似下面的語法：

$("#sltDef").find("option:contains('第4個選項')").attr("selected", true);