Solved

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

Posted on 2003-11-27
9
431 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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
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…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
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…

706 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

20 Experts available now in Live!

Get 1:1 Help Now