标签: html-select
如何在javascript中填充select元素的选项
代码:
var newSelect=document.createElement('select');
index=0;
var optn = document.createElement("option");
//langArray is an array that contains different items..the size
//is not fixed for this array.
for(element in langArray)
{
//Now i want to assign each item in langArray to each option tag
//will it be sumthng like "optn.options[index]=new Option("Sports", "sportsvalue", true, false);
//optn.accept(langArray[0]);
index++;
}
我正试图通过这种方式填充选项,但它不能正常,因为我不知道如何从JS中的数组填充选项.我是否必须使用循环或者我可以将langArray分配给select元素的某些属性,并且每个东西都将启动并运行？
推荐指数
解决办法
查看次数
Bootstrap 3选择内联输入表格
我正在尝试获取输入并选择内联的选项内联,就像使用Bootstrap 2的这个演示一样.
按照Bootstrap 3指南,我设法做到这一点:
<div class="container">
<div class="col-sm-7 pull-right well">
<form class="form-inline" action="#" method="get">
<div class="form-group col-sm-5">
<input class="form-control" type="text" value="" placeholder="Search" name="q">
</div>
<div class="form-group col-sm-3">
<select class="form-control" name="category">
<option>select</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<button class="btn btn-primary col-sm-3 pull-right" type="submit">Search</button>
</form>
</div>
</div>
它是响应性的,但输入和选择不能没有一些讨厌的CSS黑客附加.我发现很多附带按钮的例子,但是这对select元素不起作用.
推荐指数
解决办法
查看次数
在HTML选择下拉选项中设置下拉元素的宽度
我正在开发一个网站,涉及使用PHP脚本自动填充选择框.这一切都很好,除了问题是我用来填充文本框的内容有很长的标题(它们是期刊文章和演示文稿标题).下拉框延伸到最长元素的宽度,该元素延伸到屏幕边缘,因此无法触及滚动条.我尝试过各种尝试使用CSS手动设置下拉框到特定宽度的方法,但到目前为止无济于事.我已经完成了将选择框设置为特定宽度的最佳效果,但下拉菜单本身要宽得多.
任何有关这方面的提示将不胜感激.
编辑:
事实证明,以下CSS行适用于除谷歌浏览器之外的所有主要浏览器(我正在测试该页面).如果知道Chrome的解决方案,那将是很好的了解.
select, option { width: __; }
推荐指数
解决办法
查看次数
如何使用jquery设置选择下拉列表的"选定选项"
我有以下jquery函数:
$.post('GetSalesRepfromCustomer', {
data: selectedObj.value
}, function (result) {
alert(result[0]);
$('select[name^="salesrep"]').val(result[0]);
});
result[0]是我想要设置为selected选择框中项目的值.
result[0]等于Bruce jones.
选择框由数据库查询填充,但渲染的html之一是:
<select id="salesrep" data-theme="a" data-mini="true" name="salesrep">
<option value=""> </option>
<option value="john smith">john smith</option>
<option value="Bruce Jones">Bruce Jones</option>
<option value="Adam Calitz">Adam Calitz</option>
<option>108</option>
</select>
$('select[name^="salesrep"]').val(result[0]);不会填充选择框选定选项.我也试过$("#salesrep").val(result[0]);没有运气.
任何帮助赞赏.
所以我想要的是salesrep下拉列表中的选定/突出显示的选项是Bruce Jones.
HTML将是:
<select id="salesrep" data-theme="a" data-mini="true" name="salesrep">
<option value=""> </option>
<option value="john smith">john smith</option>
<option value="Bruce Jones" selected >Bruce Jones</option>
<option value="Adam Calitz">Adam Calitz</option>
<option>108</option>
</select>
再次感谢,
整个脚本
<script type="text/javascript"> …推荐指数
解决办法
查看次数
如何在用户想要选择选项后展开"选择"选项宽度
也许这是一个简单的问题,也许不是.我有一个选择框,我用宽度硬编码.说120px.
<select style="width: 120px">
<option>REALLY LONG TEXT, REALLY LONG TEXT, REALLY LONG TEXT</option>
<option>ABC</option>
</select>我希望能够显示第二个选项,以便用户可以看到文本的全长.
像其他一切一样.这在Firefox中运行良好,但不适用于Internet Explorer6.
推荐指数
解决办法
查看次数
使用Javascript/jQuery以编程方式关闭SELECT下拉列表
我有一个用一个值初始化的下拉列表.当用户单击它时,将删除单个元素并添加一个新元素,说"正在加载",然后向服务器发出AJAX调用,并在返回时将新值添加到控件中.
问题是控件在更新时保持打开状态,我想关闭它.
这是一个例子:http://jsfiddle.net/vtortola/CGuBk/2/
该示例的AJAX可能不会获取数据,因为我在调用jsfiddle api时遇到了错误,但它显示了SELECT更新期间保持打开状态的方式.
我想知道如何以编程方式关闭下拉列表而不关注另一个输入.
推荐指数
解决办法
查看次数
为什么<INPUT>比我说的要宽？
给定a <select>和<input>元素,两者都指定为200px宽:
<!doctype html>
<body>
<select style="width: 200px"></select><br/>
<input style="width: 200px" type="text">
</body>
<html>
一个比另一个更宽1,2,3,4:
这是什么原因？
如果有人能说出理由,也许解决方案是显而易见的,而不是黑客和祈祷.
布局
应用的布局非常合理:
更新1:当我写这个问题时,Chrome从17到19更新了.
更新2:将填充<input>从1更改为0:
<!doctype html>
<body>
<select style="width: 200px"></select><br/>
<input style="width: 200px; padding: 0" type="text">
</body>
<html>
不会使<input> 200px宽(即不修复它).
更新3: 应用CSS重置:
<!doctype html>
<head>
<style type="text/css">
* {
padding: 0;
margin: 0; …推荐指数
解决办法
查看次数
iPhone 8上有多个<select>严重错误的iOS？
在iOS 8.0中,Apple在iPhone上的Safari中引入了一个新的错误,我认为在使用多个<select>元素时非常严重.例如,它通常用于选择出生日期.重现:
有两个创建一个页面
<select>有多个<option>每在iPhone上的iOS 8上的Safari中打开(该错误仍然存在于8.0.2中)
点按第一个
<select>选择第三个选项,即三月
请注意,它不会更新
<select>您选择的内容(在iOS 7中更新)点按第二个
<select>元素请注意以下事项:
- 第一个
<select>没有更新 - 第二个
<select>显示3(这是第一个的位置<select>) - 下面的选择器显示1
- 第一个
您可以通过在点击第一个和第二个之间交替重复此操作<select>,并注意它以相同的模式更改.除非您知道模式,否则这可能是随机出现的).如果你还有一个年度挑选者,那看起来会更加令人困惑.
要试用你的移动设备,试试这个jsfiddle:http: //jsfiddle.net/m7baw590/6/embedded/result/
此外,onchange="alert(this.value)"报告的值不正确(与第二个<select>元素相同.您可以在此处看到:http://jsfiddle.net/m7baw590/7/embedded/result/
如果在每个选择之间单击"完成",或使用箭头切换,则不会发生这些错误.
这有什么解决方法吗？
推荐指数
解决办法
查看次数
如何解决IE6中的选择重叠错误？
使用IE时,不能在选择的输入元素上放置绝对定位的div.这是因为select元素被认为是一个ActiveX对象,并且位于页面中每个HTML元素的顶部.
我已经看到人们在打开弹出窗口时隐藏选择,这会导致控件消失的用户体验非常糟糕.
FogBugz实际上有一个非常聪明的解决方案(在v6之前)在显示弹出窗口时将每个选项转换为文本框.这解决了这个错误并欺骗了用户的眼睛,但行为并不完美.
另一个解决方案是在FogBugz 6中,他们不再使用select元素并在任何地方重新编码.
我目前使用的最后一个解决方案是搞乱IE渲染引擎并强制它将绝对定位<div>为ActiveX元素,确保它可以存在于select元素上.这可以通过在<iframe>内部放置一个不可见的<div>样式来实现:
#MyDiv iframe
{
position: absolute;
z-index: -1;
filter: mask();
border: 0;
margin: 0;
padding: 0;
top: 0;
left: 0;
width: 9999px;
height: 9999px;
overflow: hidden;
}
有没有人比这个有更好的解决方案？
编辑:这个问题的目的是提供信息,因为它是一个真正的问题.我发现这个<iframe>技巧是一个很好的解决方案,但我仍在寻找改进方法,比如删除这个丑陋无用的标签会降低可访问性.
推荐指数
解决办法
查看次数
onclick选项标签不适用于IE和Chrome
我onclick在select框中使用选项标签中的事件
<select>
<option onclick="check()">one</option>
<option onclick="check()">two</option>
<option onclick="check()">three</option>
</select>`
onclick事件不适用于IE和Chrome但它在firefox中工作正常,这里我不想onchange在select标签bcz上使用事件如果用户再次选择相同的选项它将不会触发事件
例如:假设第一次用户选择"一个"下拉列表我会在处理完一些东西之后打开一个弹出窗口用户关闭弹出窗口,假设用户想要选择相同的"一个"下拉列表它不会触发任何事件.这可以使用onclick事件解决选项标签,但它不适用于IE和Chrome
这有什么工作吗？
推荐指数
解决办法
查看次数
标签 统计
html-select ×10
html ×6
css ×4
jquery ×3
javascript ×2
html-input ×1
ios ×1
ios8 ×1
iphone ×1
safari ×1
selected ×1