JQuery隐藏、添加select的option

最新推荐文章于 2023-11-30 20:21:41 发布

芭比萌妹

最新推荐文章于 2023-11-30 20:21:41 发布

阅读量1.6k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_49456013/article/details/108105834

版权

前端专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何根据前一个select的选择值，利用JQuery动态更新下一个select的选项，实现级联查询的效果。页面实现中，当用户在第一个select中做出选择时，第二个select的选项会相应变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求

级联查询，根据前一个select选择的值，动态改变后一个select的值
页面效果大致如下：
在这里插入图片描述
代码：

<ul>
            <li>
                 <p>设备类型：</p>
                 <select name="deviceType" id="deviceType">
                     <option value="outdoor">门口机</option>
                     <option value="indoor">室内机</option>
                 </select>
             </li>
            <li id="hardVersionLi">
                <p>设备尺寸：</p>
                <select name="hardVersion" id="hardVersion">
                    <option value="OTD_8.0">8寸</option>
                    <option value="OTD_10.0">10寸</option>
                </select>
            </li>
   </ul>


//监听设备类型change事件
     $("#deviceType").change(function(e){
            if (e.target.value === 'indoor'){
                $("#hardVersion").empty();
                $("#hardVersion").append("<option value='IND_7.0'>7寸</option>");
                $("#hardVersion").append("<option value='IND_10.0'>10寸</option>");
            }else {
                $("#hardVersion").empty();
                $("#hardVersion").append("<option value='OTD_8.0'>8寸</option>");
                $("#hardVersion").append("<option value='OTD_10.0'>10寸</option>");
            }
        });