如何根据一个值来动态让select下的option选中

最新推荐文章于 2020-06-18 17:02:32 发布

hober.z

最新推荐文章于 2020-06-18 17:02:32 发布

阅读量1.8k

点赞数

分类专栏：前端文章标签： JavaScript HTML Select option

博主原创文章，转载请注明来源。

本文链接：https://blog.csdn.net/somehow1002/article/details/81408554

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

html如下：

<select id="test">
    <option value="0">请选择</option>
    <option value="1">value1</option>
    <option value="2">value2</option>
    <option value="3">value3</option>
    <option value="4">value4</option>
    <option value="5">value5</option>
</select>

相应JavaScript如下

根据值让option选中

$("#test option[value='2']").attr("selected", "selected");

根据值去除选中状态

$("#test option[value='2']").removeAttr("selected");

监控值改变状态

 $("#test").change(function () {
        alert("You chose:" + $("#test").val())
    })

完整demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Select Test</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>
<select id="test">
    <option value="0">请选择</option>
    <option value="1">value1</option>
    <option value="2">value2</option>
    <option value="3">value3</option>
    <option value="4">value4</option>
    <option value="5">value5</option>
</select>
<br>
<button onclick="selectItem()">选中2</button>
<br>
<button onclick="removeSelectItem()">取消选中</button>
<script type="text/javascript">
    function selectItem() {
        $("#test option[value='2']").attr("selected", "selected");
    }

    function removeSelectItem() {
        $("#test option[value='2']").removeAttr("selected");
    }

    $("#test").change(function () {
        alert("You chose:" + $("#test").val())
    })
</script>
</body>
</html>