标签: html-datalist

如何使html格式数据列表选项的显示和值不同？

例如,对于select-option字段,我可以写: <option value="Fake">Sample</option>显示"Sample",但"Fake"是发布的值.

对于数据列表,<option value="Sample" />"Sample"既显示又用作过帐值.

我怎样才能这样做,以便我可以在数据列表中发布Sample的不同值？谢谢!

我需要这个,所以我可以从MySQL动态填充datalist,例如在使用ID时显示名称<option value="2">Bob</option>(如果这是一个select-option字段而不是数据库字段).

我发现我可以使用它<option value="Fake" label="Sample"/>,它会将它隐藏在Firefox中,但Opera仍会同时显示Value和Label.任何人都有任何进一步的想法显示Sample,但隐藏假？

例如:

<input type="text" list="sample"/>
<datalist id="sample">
    <option value="item 1"/>
    <option value="item 2"/>
</datalist>

是否可以在选择了数据列表中的项目时捕获事件？在输入元素上调用onclick或onchange不起作用.

我有一个看起来像这样的数据列表框:

<td>
    <input list="screens.screenid-datalist" type="text" id="screens.screenid" onblur="validate('0','0','jacques')">
    <datalist id="screens.screenid-datalist">
        <option value="Login"></option>
        <option value="ScreenCreator"></option>
    </datalist>
    <label id="val-screens.screenid" class="Label_Error" style="visibility: hidden;">*</label>
</td>

我有一个JavaScript代码,必须从这个datalist获取值.

我尝试了以下所有方法来获得价值

document.getElementById('screens.screenid').value
document.getElementById('screens.screenid').text
document.getElementById('screens.screenid').innerHTML
document.getElementById('screens.screenid').option

它似乎没有用.

我的JavaScript或HTML代码有问题吗？

当我使用控制台获取值时:

是否可以在给定的字符串长度上给出html5 datalist触发器？

<input list="tagLookup" id="tag" name="tag" type="text" placeholder="+ add custom tag" autocomplete=off triggerOn="3">
<datalist id="tagLookup">
  <option value="aaaa">
  <option value="bbbb">
  <option value="cccc">
</datalist>  

想显示用户输入的3个字符的建议.

我对HTML数据列表有一个简单的问题，但不知何故无法解决此问题。我试图更改以下数据列表的显示宽度：

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="this is a really long name for a browser">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Internet Explorer">
</datalist>
<input type="submit">

但是无论我尝试什么，它仍然会减少“长”选项值。我如何更改它，以便数据列表显示所有选项值，无论它们多长时间？

最好的祝福

我有一个有很多选项的数据列表,列表太长了我想给它垂直滚动.

<input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
<option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
<option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>

这里是演示问题
FIDDLE

我在http://codepen.io/liang179/pen/WQvERK上有一个HTML页面,其中包含与大型数据列表相关联的标记.它在chrome中显示有溢出.屏幕上还有数据.但是在带有滚动条的firefox中它很好.我可以做些什么来使用滚动条在chrome中显示它,就像在firefox中一样.下面是代码.

$('#trigger').click(function(){
		$class = "animated infinite " + $('#type').val();
		$('#target').removeClass().addClass($class);
});

<div style="text-align: center;">
	<div id='target' style="margin: 200px auto; width: 200px; height:200px; background-color:#663399"></div>
	<div>
		<input id="type" list="classes">
		<datalist id="classes">
			<option value="bounce">
			<option value="flash">
			<option value="pulse">
			<option value="rubberBand">
			<option value="shake">
			<option value="swing">
			<option value="tada">
			<option value="wobble">
			<option value="jello">
			<option value="bounceIn">
			<option value="bounceInDown">
			<option value="bounceInLeft">
			<option value="bounceInRight">
			<option value="bounceInUp">
			<option value="bounceOut">
			<option value="bounceOutDown">
			<option value="bounceOutLeft">
			<option value="bounceOutRight">
			<option value="bounceOutUp">
			<option value="fadeIn">
			<option value="fadeInDown">
			<option value="fadeInDownBig">
			<option value="fadeInLeft">
			<option value="fadeInLeftBig">
			<option …

有没有办法显示焦点上的所有数据主义选项？我需要在按键后显示所有选项.

<form action="" method="get">
 <input list="browsers" name="browser">
 <datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
 </datalist>
 <input type="submit">
</form>

小提琴

PS:这跟这个问题不一样.我的datalist选项是使用jquery动态生成的.

我有一个带有datalist的输入类型文本,其中包含重复的选项值

<input type="text" id="my-input" list="data-list">
<datalist id="data-list">
   <option value="John" data-id="1"></option>
   <option value="George" data-id="2"></option>
   <option value="John" data-id="3"></option>
</datalist>

data-id当我选择选项时,我有什么选择.例如,如果我选择第二个John获取3为id.我刚发现这个:

$("#data-list option[value='" + $('#my-input').val() + "']").attr('data-id');

但是,如果我选择了第二个约翰,它将返回1为id,whitch是不正确的.

我正在写一个动态数据列表。但是，当我尝试更新列表时，前一个没有清除。有什么解决办法吗？

这是我的代码

 function loadDataList(selectedSchoolName)
    {
        var options = '';
        //document.getElementById('schoolNameList').remove();
        for(var i = 0; i < selectedSchoolName.length; i++)
        {
            options += '<option value="'+ selectedSchoolName[i] +'" >';
        }
        document.getElementById('schoolNameList').innerHTML = options;
    }

谢谢你