JavaScript操作select下拉框的完整教程

一、原生JavaScript給select下拉框賦值

首先，我們可以通過原生JavaScript給select下拉框添加option節點，並設置其text和value屬性來賦值：

var select = document.getElementById("mySelect");

var option1 = document.createElement("option");
option1.text = "選項1";
option1.value = "1";
select.appendChild(option1);

var option2 = document.createElement("option");
option2.text = "選項2";
option2.value = "2";
select.appendChild(option2);

這段代碼中，我們獲取了id為”mySelect”的select元素，並依次創建了兩個option節點，並在select元素中添加了這兩個option節點。

二、怎麼使用JavaScript給select下拉框賦值

在使用JavaScript給select下拉框賦值時，我們還可以使用innerHTML屬性來為select元素添加option節點：

var select = document.getElementById("mySelect");
select.innerHTML = "<option value='1'>選項1</option><option value='2'>選項2</option>";

這段代碼中，我們同樣是獲取了id為”mySelect”的select元素，然後使用innerHTML屬性為該元素添加了兩個option節點。需要注意的是，在使用innerHTML屬性添加節點時，必須使用HTML實體化符號””，否則瀏覽器會將其解析為HTML標籤。

三、JavaScript循環給下拉框賦值

如果我們需要在JavaScript中循環將一個數組等數據源的值賦給select下拉框，我們可以使用for循環來遍曆數組，並逐一創建option節點並添加到select元素中：

var select = document.getElementById("mySelect");
var options = ["選項1", "選項2", "選項3"];

for (var i = 0; i < options.length; i++) {
  var option = document.createElement("option");
  option.text = options[i];
  option.value = i;
  select.appendChild(option);
}

這段代碼中，我們創建了一個options數組，其中包含了三個字符串元素。然後使用循環遍歷該數組，逐一創建option節點，並設置其text和value屬性，最後添加到select元素中。

四、JavaScript中select下拉框選中

在JavaScript中，如果我們需要選擇一個特定的選項，我們可以通過設置select元素的selectedIndex屬性來實現。例如，我們要選中第二個選項，可以這樣做：

var select = document.getElementById("mySelect");
select.selectedIndex = 1;

這段代碼中，我們獲取了id為”mySelect”的select元素，並將其selectedIndex屬性設置為1，即選中了第二個選項。

五、JavaScript給select下拉框動態賦值

在某些情況下，我們需要在頁面加載完成後，動態的為select下拉框賦值。這時，我們可以使用window.onload事件來觸發JavaScript代碼的執行：

window.onload=function(){
  var select = document.getElementById("mySelect");
  select.innerHTML = "<option value='1'>選項1</option><option value='2'>選項2</option><option value='3'>選項3</option>";
}

這段代碼中，我們使用了window.onload事件，即在頁面加載完成後觸發其中的代碼。在這個事件中，我們獲取了id為”mySelect”的select元素，並使用innerHTML屬性添加了三個option節點。

六、JavaScript實現select下拉多選

在JavaScript中，我們可以通過設置select元素的multiple屬性為true，來實現select下拉框的多選功能：

<select id="mySelect" multiple>
  <option value="1">選項1</option>
  <option value="2">選項2</option>
  <option value="3">選項3</option>
</select>

這段代碼中，我們添加一個id為”mySelect”的select元素，並設置其multiple屬性為true，即可實現多選功能。

七、JavaScript給select設置默認值

在JavaScript中，我們可以通過設置select元素的value屬性，來設定其默認選項：

<select id="mySelect">
  <option value="1">選項1</option>
  <option value="2" selected>選項2</option>
  <option value="3">選項3</option>
</select>

這段代碼中，我們為第二個option節點添加了selected屬性，即設置了其為默認選項。當然，我們也可以在JavaScript中使用該節點的value屬性來設置其為默認選項：

var select = document.getElementById("mySelect");
select.value = "2";

這段代碼中，我們獲取了id為”mySelect”的select元素，並將其value屬性設置為”2″，即將第二個選項設置為默認選項。

八、JavaScript設置select選中的值

在JavaScript中，我們可以使用select元素的value屬性，來獲取或設置其當前選中的值：

var select = document.getElementById("mySelect");
console.log(select.value); // 輸出當前選中的值
select.value = "2"; // 設置當前選中的值

這段代碼中，我們首先獲取了id為”mySelect”的select元素，並使用console.log函數輸出了其當前選中的值。然後，我們將該元素的value屬性設置為”2″，即將第二個選項設置為當前選項。

九、JavaScript獲取select下拉框的值

在JavaScript中，我們可以使用select元素的value屬性，來獲取其當前選中的值：

var select = document.getElementById("mySelect");
var selectedValue = select.value;
console.log(selectedValue); // 輸出當前選中的值

這段代碼中，我們獲取了id為”mySelect”的select元素，並將其value屬性賦值給selectedValue變量，最後使用console.log函數輸出了該變量的值，即當前選中的值。

至此，我們已經學習了JavaScript操作select下拉框的各種方法。在實際開發中，我們可以根據實際需求選擇合適的方法來進行操作。