所以无论出于什么原因，这里提到的所有基于jquery的解决方案都不适合我。所以这里是一个纯javascript的解决方案，它也应该在做POST时保留所选的值。

setDropdownReadOnly('yourIdGoesHere',true/false)

函数setDropdownReadOnly(controlName, state) { var ddl = document.getElementById(controlName); For (i = 0;I < ddl.length;我+ +){ if (i == ddl.selectedIndex) ddl[我]。禁用= false; 其他的 ddl[我]。禁用=状态; ｝ ｝

简单的CSS解决方案:

select[readonly]{
    background: #eee;
    cursor:no-drop;
}

select[readonly] option{
    display:none;
}

这导致在选择是灰色的漂亮的“禁用”光标悬停 在选择选项列表是“空”，所以你不能改变它的值。

您可以禁用除当前选中的选项以外的所有选项，而不是选择本身。这提供了一个工作的下拉菜单的外观，但只有您想要传递的选项是有效的选择。

如果选择下拉菜单自诞生以来是只读的，根本不需要更改，也许您应该使用另一个控件?比如一个简单的<div>(加上隐藏的表单字段)或一个<input type="text">?

补充:如果下拉菜单不是一直都是只读的，并且JavaScript被用来启用/禁用它，那么这仍然是一个解决方案——只需要动态修改DOM。

您应该禁用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>

这是最简单、最好的解决办法。 您将在您的选择上设置一个readolny属性，或任何其他属性，如data-readonly，并执行以下操作

$("select[readonly]").live("focus mousedown mouseup click",function(e){
    e.preventDefault();
    e.stopPropagation();
});