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

时间:2014-05-15 12:27:26

标签: html

请参阅此链接

Demo

请帮我把这个列表框只读。请不要使用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>

4 个答案:

答案 0 :(得分: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()

做任何事情。

答案 1 :(得分:0)

该元素没有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

答案 2 :(得分:0)

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

答案 3 :(得分:0)

据我所知,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>