Fatal编程技术网
  • javascript/
  • Javascript 数据列表垂直滚动在chrome中不工作

Javascript 数据列表垂直滚动在chrome中不工作

javascript jquery html css

Javascript 数据列表垂直滚动在chrome中不工作,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我使用了datalist功能来列出我的产品名称，如果列表过长垂直滚动在谷歌浏览器和一些浏览器中不显示。是否可以为数据列表添加css样式的overflow-y:scroll？使用的代码如下： 不幸的是，不，您不能为数据列表使用overflow-y属性。您必须编写jQuery代码来实现它，或者至少显示所有可能的值 我为您写了一个小例子，希望它能帮助您自己完成： <!DOCTYPE html> <html> <head> <title><

我使用了datalist功能来列出我的产品名称，如果列表过长垂直滚动在谷歌浏览器和一些浏览器中不显示。是否可以为数据列表添加css样式的
overflow-y:scroll
？使用的代码如下：

不幸的是，不，您不能为
数据列表
使用
overflow-y
属性。您必须编写jQuery代码来实现它，或者至少显示所有可能的值

我为您写了一个小例子，希望它能帮助您自己完成：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <style>
  #options{
    display: none;
    height: 300px;
    text-align: center;
    border: 1px solid red;
    overflow-y:scroll;
  }
  #options>p{
    margin-top: 10px;
    margin-bottom: 10px;
    cursor: pointer;
  }
    </style>
</head>
<body>
<form action="demo_form.asp" method="get">

  <input list="browsers" name="browser">

  <datalist id="browsers">

  <option value="a"></option>
  <option value="b"></option>
  <option value="c"></option>
  <option value="d"></option>
  <option value="e"></option>
  <option value="f"></option>
  <option value="g"></option>
  <option value="h"></option>
  <option value="i"></option>
  <option value="j"></option>
  <option value="k"></option>
  <option value="l"></option>
  <option value="m"></option>
  <option value="n"></option>
  <option value="o"></option>
  <option value="p"></option>
  <option value="q"></option>
  <option value="r"></option>
  <option value="s"></option>
  <option value="t"></option>
  <option value="u"></option>
  <option value="v"></option>
  <option value="w"></option>
  <option value="x"></option>
  <option value="y"></option>
  <option value="z"></option>

  </datalist>

  <input type="submit">

  <div id="options">
  </div>

</form>
<div class="med_rec"></div>
<script>
$('#browsers option').each(function(){
  $('#options').append('<p>'+$(this).val()+'</p>');
})

$('#options').css({'width':$('input[name="browser"]').width()});
    $('input[name="browser"]').click(function(){
         $('#options').show();
    });
  $('input[name="browser"]').keyup(function(){
    $('#options').hide();
  });
  $('#options p').click(function(){
    $('input[name="browser"]').val($(this).text());
    $('#options').hide();
  })
</script>
</body>
</html>


#选择权{
显示：无；
高度：300px；
文本对齐：居中；
边框：1px纯红；
溢出y：滚动；
}
#选项>p{
边缘顶部：10px；
边缘底部：10px；
光标：指针；
}
$（“#浏览器选项”）。每个（函数（）{
$（'#options'）.append（''+$（this.val（）+'
'）；
})
$（'#options'）.css（{'width'：$（'input[name=“browser”]'）.width（）}）；
$（'input[name=“browser”]”）。单击（函数（）{
$（“#选项”）.show（）；
});
$（'input[name=“browser”]”）。键控（函数（）{
$（“#选项”）.hide（）；
});
$（'#选项p'）。单击（函数（）{
$（'input[name=“browser”]”）.val（$（this.text（））；
$（“#选项”）.hide（）；
})
它实际上创建了第二个选项列表，让您从中选择可滚动的选项，如果用户在输入框中键入，那么datalist将按照预期的方式提供建议

我希望它有帮助

我已经使用ComboBox Javascript组件解决了这个问题，从：

var no=新组合框（“cb_标识符”）

div.combobox{
字体系列：Tahoma；
字号：12px
}
分区组合框{
位置：相对位置；
缩放：1
}
div.combobox div.dropdownlist{
显示：无；
宽度：200px；
边框：实心1px#000；
背景色：#fff；
高度：200px；
溢出：自动；
位置：绝对位置；
顶部：18px；
左：0px；
}
组合框下拉列表a{
显示：块；
文字装饰：无；
颜色：#000；
填充：1px；
高度：1米；
游标：默认值
}
组合框下拉列表a.灯{
颜色：#fff；
背景色：#007
}
div.combobox.dropdownlist，
输入{
字体系列：Tahoma；
字体大小：12px；
}
组合框输入{
浮动：左；
宽度：182px；
边框：实心1px#ccc；
高度：15px
}
组合框跨度{
边框：实心1px#ccc；
背景：#eee；
宽度：16px；
高度：17px；
浮动：左；
文本对齐：居中；
左边界：无；
游标：默认值
}



▼
项目1
第二项2
第三项3

有一个简单的解决方案。使用插件

例如：


<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="YOURBASE_JS_PATH/src/datalist.js"></script>

var maxHeight = '200px';
var openOnClick = true;
$('input[list]').datalist(maxHeight, openOnClick);




var maxHeight='200px'；
var openOnClick=true；
$（'input[list]'）。数据列表（maxHeight，openOnClick）；

查看我的笔：如果我的答案帮助您解决了问题，请将其标记为已接受答案以关闭此线程。谢谢@Abhay请检查我的答案。这有一个公开的bug（投票！）这在Chrome69中已经修复：你想让我为你写jquery代码吗？因为没有内置功能或您想要实现的功能。是的。你能帮我吗？这对那个问题没有帮助。