表单标签select以第一个option为默认选项，怎么解决？

最新推荐文章于 2024-09-28 20:41:05 发布

lina-and-watermelon

最新推荐文章于 2024-09-28 20:41:05 发布

阅读量1k

点赞数 3

本文链接：https://blog.csdn.net/ready_to_be/article/details/140571926

版权

一、select的基本使用

下面是代码举例

<label for="taste"></label>
<select id="taste">
    <option value="few">微微辣</option>
    <option value="little">微辣</option>
    <option value="spicy">辣</option>
</select>

效果图如下：

二、一些奇怪的发现

1.示例一

即select标签是以第一个option为默认选项的。但是，如果我不想这样呢，如果select像input那样，可以用placeholdor 设置最初的提醒文字就好了,其实不能

这样没有任何效果!

那么如何解决呢？

可以再新增一项选择项，放置在最前面，内容为提醒文字，然后设置成checked。

效果如图：

虽然这样选项中就多了提醒文字项，但不失为一种解决办法。

2.示例二

1.下面将示例一段天气表的代码，让我们着重关注seclect标签部分。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="./question2.css">
<script text="javascript" src="./tools/jquery-3.7.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs/dayjs.min.js"></script>

<body>
    <div class="card">
        <div class="city-card">
            <select class="city" onchange="jumpweather(this.value)">
            
                <option value="广安">广安</option>
                <option value="绵阳">绵阳</option>
                <option value="广元">广元</option>
                <option value="达州">达州</option>
            </select>
        </div>
        <div class="weather">
           
        </div>
    </div>
</body>
<script>
    function jumpweather(city) {
        console.log(city);
        var ajax2 = new XMLHttpRequest()
            //规定请求的类型、URL 以及是否异步处理请求。
        ajax2.open("POST", "https://apis.tianapi.com/tianqi/index", true)
            // 设置请求头
        ajax2.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
            // 发送请求并带上数据
        ajax2.send(`key=3c78958229a2730dcfa970a43c52811b&city=${city}`)
            // onload接收响应
        ajax2.onload = function() {
                var data = JSON.parse(ajax2.response)
                console.log(data);
                $('.weather').empty() //清空原来城市获取到的天气
                data.result.list.forEach(element => {
                  
                    var nowDay = new Date().getDay()
                    var date = new Date(element.date).getDay()
                    console.log(nowDay, date)
                    var dayLabel = element.week
                    switch (nowDay - date) {
                        case 0:
                            dayLabel = '今天'
                            break
                        case -1:
                            dayLabel = '明天'
                            break
                        case 6:
                            dayLabel = '明天'
                            break

                    }
                    $('.weather').append(`
                <div class="child">
                <div class="date">${dayjs(element.date).format('MM月DD日')}</div>
                <div class="week">${dayLabel}</div>
                <div class="logo"><img src="./assest/${element.weatherimg}"></div>
                <div class="describe">${element.weather}</div>
                 <div class="tem">${element.lowest.substring(0,element.lowest.length-1)}~${element.highest}</div>
                </div>
                `)
                });
            }
            // 异常处理,地址出错或者服务器出错
        ajax2.onerror = function() {
            alert('服务器错误')
            console.log(ajax1.response);
        }
    }
    
</script>

</html>

相应css代码如下：

.card {
    width: fit-content;
    height: fit-content;
    margin: auto;
    position: relative;
    background-color: aqua;
    top: 100px;
}

.card .city-card {
    width: 100px;
    height: 30px;
    background-color: antiquewhite;
    position: absolute;
    right: 0px;
    top: -60px;
}

.card .weather {
    width: 950px;
    height: 200px;
    background-color: aquamarine;
    display: flex;
    gap: 40px;
    align-items: center;
}

.card .weather .child {
    display: flex;
    flex-direction: column;
    align-items: center;
}

运行效果如下：