Solved

Using scroll bar in Select object but preventing selection of option.

Posted on 2003-11-27
9
435 Views
Last Modified: 2010-04-09
I have a situation where, some users are only allowed to view the list options in a select control, but they are not allowed to alter the selection(s). If I use the disabled property, the scroll bars are disabled and they cannot see all the options. How can I get round this?
0
Comment
Question by:WhiteEagle
  • 5
  • 3
9 Comments
 
LVL 31

Expert Comment

by:seanpowell
ID: 9832579
As you've probably gathered, the readonly attribute is not available for a Select Box control. Normally the user would not be able to modify the values anyway, so I'm not sure what you're attempting. Can you be more specific?
0
 

Author Comment

by:WhiteEagle
ID: 9832606
The user needs to be able to see all the possible options that could have been selected by an authorised user even though they cannot alter the selected option(s). The options will vary depending on other values in the screen.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9832622
Hmmm... is it possible for you to simply present the options as a text-based list instead of a select box, whenever the disabled condition is true?
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9832625
Or failing that, list the options in a textarea - which can be readonly, instead of the select box?
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 50 total points
ID: 9833291
<html><head><title>none</title>
</head>
<body>
<select class="selcls1" save="" onFocus="this.save=this.selectedIndex"
   onChange="this.selectedIndex=this.save">
<option value="A"> This is option A</option>
<option value="B"> This is option B</option>
<option value="C" selected> This is option C</option>
</select>
</body>
</html>

Works for for IE and Moz.

Cd&
0
 

Author Comment

by:WhiteEagle
ID: 9836923
That works fine if there is only a single selection. What if there are multiple selections allowed?
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9837449
Just as an afterthought, you could have the selected items appear with a different style. It doesn't prevent selections, but makes it appear to the user that they're fixed.

<html>
<head>
<title>none</title>
<style type="text/css">
<!--
.selected { background-color:FF0000; color:#FFFFFF; }
//-->
</style>
</head>
<body>
<p>Selected options are displayed in red.</p>
<select multiple name="MySelect" size="5" >
<option value="A" class="selected">This is option A</option>
<option value="B"> This is option B</option>
<option value="C" class="selected">This is option C</option>
<option value="D"> This is option D</option>
<option value="E"> This is option E</option>
<option value="F" class="selected">This is option F</option>
<option value="G"> This is option G</option>
<option value="H"> This is option H</option>
<option value="I" class="selected">This is option I</option>
</select>
</body>
</html>
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9837807
So what's the answer for multiple selections?
0
 

Author Comment

by:WhiteEagle
ID: 9838491
I have done the following:

<html><head><title>none</title>

<script>
// Functions to backup and restore Read-only list boxes
function backupReadonlyOpts(obj) {

      var ary = new Array(obj.options.length);

      for (var z=0; z<obj.options.length; z++)
      {
            ary[z] = obj.options(z).selected;
      }
      obj.save = ary;
}

function restoreReadonlyOpts(obj) {
      for (var z=0; z<obj.options.length; z++)
      {
            obj.options(z).selected=obj.save[z];
      }
      bCtrlReadOnly = true;
 }
</script>

</head>
<body>
<select class="selcls1" multiple=true size=3 style='DISPLAY: auto' save="" onFocus="backupReadonlyOpts(this);"
   onChange="restoreReadonlyOpts(this);">
<option value="A"> This is option A</option>
<option value="B"> This is option B</option>
<option value="C" selected> This is option C</option>
<option value="D"> This is option D</option>
<option value="E"> This is option E</option>
<option value="F" selected> This is option F</option>
</select>
</body>
</html>
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now