根据HTML规范,HTML中的select标签没有readonly属性,只有disabled属性。所以如果你想让用户不改变下拉菜单,你必须使用disabled。
唯一的问题是禁用的HTML表单输入不会包含在POST / get数据中。
什么是最好的方法来模拟一个选择标签的只读属性,仍然得到POST数据?
根据HTML规范,HTML中的select标签没有readonly属性,只有disabled属性。所以如果你想让用户不改变下拉菜单,你必须使用disabled。
唯一的问题是禁用的HTML表单输入不会包含在POST / get数据中。
什么是最好的方法来模拟一个选择标签的只读属性,仍然得到POST数据?
当前回答
我用jquery解决了它:
$("select.myselect").bind("focus", function(){
if($(this).hasClass('readonly'))
{
$(this).blur();
return;
}
});
其他回答
这个javascript找到所有的'select'与'readonly'属性,然后把disabled在'options'除了selected(回发)
文档。querySelectorAll("select[readonly] > option:not([selected])")。forEach((el) => el。setAttribute("disabled", "disabled")); 不带readonly: <select> <选项> 1 > < /选项 <选项> 2 > < /选项 <选项> 3 < /选项> < /选择> < br > 带readonly: <select readonly="readonly"> <选项> 1 > < /选项 <选项> 2 > < /选项 <选项> 3 < /选项> < /选择>
除了禁用不应该是可选的选项,我想实际上让他们从列表中消失,但仍然能够启用他们,我应该以后需要:
$("select[readonly]").find("option:not(:selected)").hide().attr("disabled",true);
它会找到所有带有只读属性的select元素,然后找到那些未被选中的select元素中的所有选项,然后隐藏它们并禁用它们。
出于性能考虑,将jquery查询分为2是很重要的,因为jquery从右向左读取它们,代码如下:
$("select[readonly] option:not(:selected)")
将首先找到文档中所有未选中的选项,然后筛选那些在具有只读属性的选择内的选项。
<select id="countries" onfocus="this.defaultIndex=this.selectedIndex;" onchange="this.selectedIndex=this.defaultIndex;">
<option value="1">Country1</option>
<option value="2">Country2</option>
<option value="3">Country3</option>
<option value="4">Country4</option>
<option value="5">Country5</option>
<option value="6">Country6</option>
<option value="7" selected="selected">Country7</option>
<option value="8">Country8</option>
<option value="9">Country9</option>
</select>
测试和工作在IE 6, 7和8b2, Firefox 2和3,Opera 9.62, Safari 3.2.1 for Windows和谷歌Chrome。
如果你禁用了一个表单字段,当表单被提交时,这将不会被发送。 所以如果你需要一个像disabled一样工作但发送值的readonly,可以这样做:
在元素的只读属性发生任何变化之后。
$('select.readonly option:not(:selected)').attr('disabled',true);
$('select:not([readonly]) option').removeAttr('disabled');
有同样的问题,并发现非常有用的属性表单提交禁用控件。
将其设置为True,禁用的输入现在是POST。