jquery 下拉框常见赋值,模糊查询

最新推荐文章于 2023-04-12 10:52:49 发布

强哥12

最新推荐文章于 2023-04-12 10:52:49 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端问题

本文链接：https://blog.youkuaiyun.com/qq_41579101/article/details/85776909

前端问题专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript实现的医院选择器，当用户聚焦输入框时，通过AJAX请求获取医院列表并展示，同时支持模糊搜索功能。

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

html

$('#prohospital3').focus(function(){
       $.ajax({
url: '../weixin/d101/list',
type: 'post',
dataType: 'json',
success: function (res) {
var select1 = $("#hospname3");
    var data = res.list;
for (i in data) {
            select1.append("<li value='"+data[i].d10101+"'>"
                        + data[i].d10102 + "</li>");
               }

//显示医院呢下拉框
$('#hospname3').show();
}
});
   })
//   协议医院3失去焦点
   $('#prohospital3').blur(function(){
       $('#hospname3').hide(200);
   })
//   协议医院3点击赋值
   $("#hospname3").on("click","li", function() {
       hname3= $(this).text();
       hcode3 = $(this).attr("value");
       $('#prohospital3').val(hname3);
});
//   协议医院3模糊查询方法一
$("#prohospital3").on("input propertychange", function () {
    var text = $('#prohospital3').val();
$("#divhosp3 li")
.hide()
.filter(":contains('" + text + "')")//文字
.show();
});

// 协议医院3模糊查询方法二

//输入实时查询事件，propertychange是IE的输入监听事件，input是其它浏览器
$("#prohospital1").bind("input propertychange",function(event){
var text = $('#prohospital1').val();
$("#divhosp li")
.hide()
.filter(":contains('" + text + "')")//文字
.show();
});