根据HTML规范,HTML中的select标签没有readonly属性,只有disabled属性。所以如果你想让用户不改变下拉菜单,你必须使用disabled。

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

什么是最好的方法来模拟一个选择标签的只读属性,仍然得到POST数据?


当前回答

如果您有一个应该是只读的选择标记,那么从逻辑上讲,您必须将选择框转换为单个“文本”字段。

我说逻辑是因为它就像: "我必须向用户显示一个值"

无论该值是否来自选择标记,都仍然是单个值且不能更改(只读)。

因此,从逻辑上讲,只有在第一次插入值时才使用选择标记。

然后,当你需要显示这个值时,你必须把它放在“文本字段只读”上。

如果多选项为只读,则变成一个值列表(所选值)

我使用“text”是因为一个只读标记不需要“type”属性。 干杯

其他回答

什么我发现伟大的工作,与纯javascript(即:没有JQuery库要求),是改变innerHTML的<select>标记为所需的单个剩余值。

之前:

<select name='day' id='day'>
  <option>SUN</option>
  <option>MON</option>
  <option>TUE</option>
  <option>WED</option>
  <option>THU</option>
  <option>FRI</option>
  <option>SAT</option>
</select>

示例Javascript:

document.getElementById('day').innerHTML = '<option>FRI</option>';

后:

<select name='day' id='day'>
  <option>FRI</option>
</select>

这样,没有视觉效果的改变,这将POST/GET在<FORM>。

您可以在提交时重新启用选择对象。

EDIT:也就是说,通常禁用select标签(带有disabled属性),然后在提交表单之前自动重新启用它:

jQuery示例:

禁用: $ (" # yourSelect”)。道具(“禁用”,真正的); 在提交前重新启用GET / POST数据: $ (" # yourForm”)。On ('submit', function() { $ (" # yourSelect”)。道具(“禁用”,假); });

此外,您可以重新启用每个禁用的输入或选择:

$('#yourForm').on('submit', function() {
    $('input, select').prop('disabled', false);
});

这可能在某种程度上与其他解决方案类似,但简化为更少的行数。

假设有一个jquery函数禁用目标选项…

$("select[id='country']").val('PH').attr("disabled", true);
$("select[id='country']").parent().append("<input type='hidden' id='country' value='PH'>");

如果你想重新启用这个选项…

$("select[id='country']").attr("disabled", false);
$("input[id='country']").remove();

“选择多个”对上述代码建议的响应几乎没有那么好。经过大量的推敲和拼凑,我最终得到了这个:

var thisId="";
var thisVal="";
function selectAll(){
    $("#"+thisId+" option").each(function(){
        if(!$(this).prop("disabled"))$(this).prop("selected",true);
    });
    $("#"+thisId).prop("disabled",false);
}
$(document).ready(function(){
    $("select option:not(:selected)").attr('disabled',true);
    $("select[multiple]").focus(function(){
        thisId=$(this).prop("id");
        thisVal=$(this).val();
        $(this).prop("disabled",true).blur();
        setTimeout("selectAll();",200);
    });
});

以下是对我有用的:

$('select[name=country]').attr("disabled", "disabled");