实现 select中指定option选中触发事件

最新推荐文章于 2022-09-20 14:28:38 发布

原创最新推荐文章于 2022-09-20 14:28:38 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何使用jQuery为HTML中的Select元素添加onChange事件，通过监听下拉框选择变化，动态显示或隐藏特定输入框，实现网页表单的交互效果。

其实本身没有触发事件方法，我们只有在select里的onchange方法里触发。

 <div class="form-group">
   <label for="group_id" class="col-sm-2 control-label no-padding-right">栏目属性  		   </label>
     <div class="col-sm-6">
         <select name="type"  id="catelink">
              <option selected="selected" value="0">封面栏目</option>
              <option value="1">列表栏目</option>
              <option value="2">外链栏目</option>
        </select>
    </div>
 </div>
 <div class="form-group" style="display: none" id="link">
     <label class="col-sm-2 control-label no-padding-right">外链地址</label>
          <div class="col-sm-6">
             <input class="form-control" placeholder="" name="link" type="text" value="">
          </div>
          <p class="help-block col-sm-4 red">* 必填</p>
 </div>


 $("#catelink").change(function () {
            let value=$(this).find('option:selected').val();
            if (value==2){
                $("#link").css('display','block');
            }else {
                $("#link").css('display','none');
            }
        })