使用HTML和CSS設置select默認選中的option，以提升用戶體驗

下拉菜單（select）作為常見的表單組件，在網頁中應用廣泛。為了增加網頁的用戶交互性，我們可以使用HTML和CSS設置select默認選中的option，以方便用戶選擇和操作。在本文中，將會介紹多種方法，幫助您提升使用select的用戶體驗。

一、設定默認值

使用HTML的「selected」屬性可以幫助我們對select增加默認選項。如下代碼所示：

    <select>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel" selected>Opel</option>
      <option value="audi">Audi</option>
    </select>

在上面的代碼中，我們使用了selected屬性對option進行了設置，使得默認選中的是Opel。當用戶打開網頁並查看該select時，它們會首先看到被選中的默認選項。這種方法簡單直接，易於實現。

二、使用JavaScript實現自動選中

有時候，在頁面跳轉或者回退時，我們希望將之前的用戶選擇狀態記錄下來，並在頁面重新加載後自動顯示出來。為了實現這個功能，我們可以使用JavaScript。

下面是一個簡單的JavaScript示例，它會檢查URL查詢變量中是否包含特定值，並為select中的option添加selected屬性。

    function getParameterByName(name) {
      name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
      var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
      results = regex.exec(location.search);
      return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
    }
    
    var make = getParameterByName('make');
    if (make) {
        document.querySelector('select[name="make"] [value="' + make + '"]').setAttribute('selected', 'selected');
    }

通過這種方法，我們可以輕鬆地實現瀏覽器歷史記錄功能，讓用戶在下一次訪問該頁面時，看到之前做出的選擇。

三、使用CSS實現下拉菜單樣式

我們可以使用CSS來美化select，為其添加鼠標懸停、選中等特效。以下代碼演示了一些常用的select樣式:

    select {
      width: 150px;
      height: 30px;
      padding: 5px;
      font-size: 16px;
      color: #000;
      border: none;
      background-color: #eee;
    }
    
    select:focus {
      outline: none;
      background-color: #fff;
      box-shadow: 0px 0px 5px #2E2E2E;
    }
    
    select:hover {
      background-color: #ccc;
    }
    
    select option:selected {
      background-color: #2E2E2E;
      color: #fff;
    }

通過使用上述CSS樣式，我們可以為頁面中的下拉菜單添加一些視覺效果，增加網頁的整體美觀度和用戶體驗。

四、總結

以上是使用HTML和CSS設置select默認選中的option，以提升用戶體驗的一些方法。我們可以通過為下拉菜單設定默認選項，使用JavaScript實現瀏覽器歷史記錄功能，使用CSS實現下拉菜單樣式美化等方法，逐步提升網頁的用戶體驗。希望這篇文章對您有所幫助！