Question

请参阅此链接

请帮我把这个列表框只读。请不要使用disable属性，因为我需要稍后发布。

 <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">

现在用户可以看到select，但是该值在隐藏输入中被复制，然后被发送到action文件。值得庆幸的是，由于选择永远不会改变，因此您不必对.change()

做任何事情。

Answer 2

该元素没有readonly属性，禁用该字段不是一个选项，因为我们需要服务器端的值。一些简单的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

   <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/

Answer 4

据我所知，readonly对于选择框并不存在。

就最佳做法而言，如果您不需要更改数据，则不应将其作为表单元素。如果你只是为了获得某个显示而使它成为一个表单元素，那么使用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>

HTML中的只读列表框而不禁用

4 个答案:

Demo