根据HTML规范,HTML中的select标签没有readonly属性,只有disabled属性。所以如果你想让用户不改变下拉菜单,你必须使用disabled。
唯一的问题是禁用的HTML表单输入不会包含在POST / get数据中。
什么是最好的方法来模拟一个选择标签的只读属性,仍然得到POST数据?
根据HTML规范,HTML中的select标签没有readonly属性,只有disabled属性。所以如果你想让用户不改变下拉菜单,你必须使用disabled。
唯一的问题是禁用的HTML表单输入不会包含在POST / get数据中。
什么是最好的方法来模拟一个选择标签的只读属性,仍然得到POST数据?
当前回答
您应该禁用select元素,但同时添加另一个具有相同名称和值的隐藏输入。
如果您重新启用SELECT,您应该将其值复制到onchange事件中的隐藏输入,并禁用(或删除)隐藏输入。
下面是一个演示:
$('#mainform').submit(function() { $('#formdata_container').show(); $('#formdata').html($(this).serialize()); return false; }); $('#enableselect').click(function() { $('#mainform input[name=animal]') .attr("disabled", true); $('#animal-select') .attr('disabled', false) .attr('name', 'animal'); $('#enableselect').hide(); return false; }); #formdata_container { padding: 10px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <form id="mainform"> <select id="animal-select" disabled="true"> <option value="cat" selected>Cat</option> <option value="dog">Dog</option> <option value="hamster">Hamster</option> </select> <input type="hidden" name="animal" value="cat"/> <button id="enableselect">Enable</button> <select name="color"> <option value="blue" selected>Blue</option> <option value="green">Green</option> <option value="red">Red</option> </select> <input type="submit"/> </form> </div> <div id="formdata_container" style="display:none"> <div>Submitted data:</div> <div id="formdata"> </div> </div>
其他回答
如果您有一个应该是只读的选择标记,那么从逻辑上讲,您必须将选择框转换为单个“文本”字段。
我说逻辑是因为它就像: "我必须向用户显示一个值"
无论该值是否来自选择标记,都仍然是单个值且不能更改(只读)。
因此,从逻辑上讲,只有在第一次插入值时才使用选择标记。
然后,当你需要显示这个值时,你必须把它放在“文本字段只读”上。
如果多选项为只读,则变成一个值列表(所选值)
我使用“text”是因为一个只读标记不需要“type”属性。 干杯
在IE中,我可以通过双击来击败onfocus=>onblur方法。 但是记住值,然后在onchange事件中恢复它似乎可以解决这个问题。
<select onfocus="this.oldvalue=this.value;this.blur();" onchange="this.value=this.oldvalue;">
....
</select>
你可以使用javascript变量来做类似的事情,而不需要expando属性。
简单: 添加样式属性到你的选择标签:
style="pointer-events: none;"
如果选择下拉菜单自诞生以来是只读的,根本不需要更改,也许您应该使用另一个控件?比如一个简单的<div>(加上隐藏的表单字段)或一个<input type="text">?
补充:如果下拉菜单不是一直都是只读的,并且JavaScript被用来启用/禁用它,那么这仍然是一个解决方案——只需要动态修改DOM。
除了禁用不应该是可选的选项,我想实际上让他们从列表中消失,但仍然能够启用他们,我应该以后需要:
$("select[readonly]").find("option:not(:selected)").hide().attr("disabled",true);
它会找到所有带有只读属性的select元素,然后找到那些未被选中的select元素中的所有选项,然后隐藏它们并禁用它们。
出于性能考虑,将jquery查询分为2是很重要的,因为jquery从右向左读取它们,代码如下:
$("select[readonly] option:not(:selected)")
将首先找到文档中所有未选中的选项,然后筛选那些在具有只读属性的选择内的选项。