監聽下拉框,當前選中值

                                                                                監聽下拉框,當前選中值

1、效果

 

2、代碼

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>監聽下拉框變化</title>
    <style>
        .select-class{
            margin:30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 32px;
            border: 1px solid #D7DAE2;
            border-radius: 5px;
            cursor: pointer;
            overflow: hidden;
            box-shadow: 0 1px 10px rgba(0, 0, 0, .1);
            cursor: pointer;
            margin-right:10px;
            float: left;
            padding: 2px;
            font: 14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
            color: #4D4F5C;
        }
    </style>
    <script src="js/jquery.min.js"></script>
</head>
<body>
<select class="select-class">
    <option value="1">選項1</option>
    <option value="2">選項2</option>
</select>
</body>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
    //監聽下拉框變化
    $('select.select-class').change(() => {
        let seeType = $('select.select-class').val();
        alert(seeType);
    });
</script>
</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章