Jquery 实现动态监听select标签，并修改属性和实时监听input的值 input propertychange

最新推荐文章于 2024-07-03 02:59:49 发布

Caroline_Yang

最新推荐文章于 2024-07-03 02:59:49 发布

阅读量6.1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/Caroline_Yang/article/details/84579428

本文介绍如何利用Jquery实现动态监听select标签的选择变化，以及实时监听input字段的值改变，通过propertychange事件来即时响应输入并修改元素属性。

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

<select id="select_id" name="condition">
    <option id="order_id" value="order_id">订单号</option>
    <option id="order_time" value="order_time">下单时间</option>
</select>
<label style="letter-spacing:1px;">&nbsp;<b>查找</b></label>
<input id="search_content_id" type="search"
       placeholder=""   name="search_content"  />




<input type="text" placeholder="请输入需要查找的信息，支持拼音及首字母搜索..." class="form-control" id="searchInput">

<script type="text/javascript">
    $(document).ready(function(){
        alert($("#select_id").val())
        $("#select_id").change(function(){
            var selected=$(this).children('option:selected').val();
            // alert(selected);
            if(selected=="order_time"){
                //document.getElementById("search_content_id").
                $("#search_content_id")[0].placeholder="时间格式：20150923";
            }else if(selected=="order_id"){
                $("#search_content_id")[0].placeholder="";
            }
        });



         var searchInput = $('#searchInput');

         searchInput.on('input propertychange', function () {
                // 当用户没有输入内容时，或typeahead没有匹配到内容时触发。
                if ($("#searchInput").val() === '' || searchNum === 0) {
                    indexObj.searchInputChange();
                }
            });





    });
</script>