HTML 表单只读 SELECT 标记/输入

Question

根据 HTML 规范，HTML 中的 select 标签没有 readonly 属性，只有 disabled 属性。因此，如果您想阻止用户更改下拉菜单，则必须使用 disabled 。

唯一的问题是禁用的 HTML 表单输入不会包含在 POST / GET 数据中。

模拟 readonly 标签的 select 属性并仍然获取 POST 数据的最佳方法是什么？

原文由 Jrgns 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 1

您应该 disabled select 元素，但还应添加另一个具有相同名称和值的隐藏 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>

原文由 bezmax 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我们也可以禁用除所选选项之外的所有选项。

这样，下拉列表仍然有效（并提交其值），但用户无法选择其他值。

演示

 <select>
    <option disabled>1</option>
    <option selected>2</option>
    <option disabled>3</option>
</select>

原文由 vimal1083 发布，翻译遵循 CC BY-SA 4.0 许可协议