根据HTML规范,selectHTML中的标记没有readonly属性,只有disabled属性。因此,如果要阻止用户更改下拉菜单,则必须使用disabled。
select
readonly
disabled
唯一的问题是禁用的HTML表单输入不会包含在POST / GET数据中。
模拟标签readonly属性select并仍然获取POST数据的最佳方法是什么?
您应该保留该select元素,disabled但还要添加另一个input具有相同名称和值的隐藏元素。
input
如果重新启用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>