html中的只读列表框而不禁用[重复]

Question

请参考此链接

Demo

请帮助我将此列表框设为只读。请不要使用禁用属性，因为我需要稍后发布。

 <select size=4 multiple="multiple">
    <option selected=selected>Volvo</option>
    <option selected=selected>Saab</option>
    <option selected=selected>Mercedes</option>
    <option selected=selected>Audi</option>
  </select>

Answer 1

您为什么不禁用此功能并添加一个<input type="hidden">，其中包含您需要发布的信息？

显然这不是很清楚，所以：

<script>

    var selectVal = $("#select_user > option[selected]").val();

    $("#select_post").val(selectVal);

</script>

<select disabled id="select_user">
    <option>Option 1</option>
    <option selected>Option 2</option>
    <option>Option 3</option>
</select>

<input type="hidden" name="select_post" id="select_post">

现在用户可以看到选择，但该值在隐藏输入中复制，然后发送到操作文件。值得庆幸的是，由于选择永远不会改变，你不必对.change()做任何事情

Answer 2

该元素没有可用的只读属性，并且禁用该字段不是一个选项，因为我们需要服务器端的值。一些简单的 javascript 完成了这项工作：

你可以试试这个脚本

<select size=4 multiple="multiple" onchange="this.selectedIndex = 1">
  <option selected="selected">Volvo</option>
  <option selected="selected">Saab</option>
  <option  selected="selected">Mercedes</option>
  <option  selected="selected">Audi</option>
</select>

只有当您的意思是用户应该能够看到列表中的所有值并且不能选择新值时，这才会起作用。

Demo

Answer 3

据我所知，选择框不存在只读。

就最佳实践而言，如果您不需要更改数据，则不应将其设为表单元素。如果你只是为了得到某种显示而将它做成一个表单元素，使用 CSS 让它看起来像一个表单元素。

另外，如果不应该更改数据，最好不要将其与表单一起发送。可以轻松禁用 Javascript。

CSS

ul.fake_select{
        list-style-type:none;
        color:#000000;
        overflow-y:scroll;
        width:100px;
        height:auto;  /* If you have lots of options, put a fixed value */
        padding:0;
}
ul.fake_select li{
        margin:0;
        background:#3399FF;
        color:#FFFFFF;
}

HTML

<ul class="fake_select">
    <li>Volvo</li>
    <li>Saab</li>
    <li>Mercedes</li>
    <li>Audo</li>
</ul>

Answer 4

   <select size=4 multiple="multiple" onchange="this.selectedIndex=this.defaultIndex;">
  <option selected="selected">Volvo</option>
  <option selected="selected" >Saab</option>
  <option  selected="selected" >Mercedes</option>
  <option  selected="selected" >Audi</option>
</select>

演示：-

http://jsfiddle.net/2gmKY/2/