使用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样式，我们可以为页面中的下拉菜单添加一些视觉效果，增加网页的整体美观度和用户体验。