Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2003-11-27
9
Medium Priority
?
443 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 150 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

[Webinar] Lessons on Recovering from Petya

Skyport is working hard to help customers recover from recent attacks, like the Petya worm. This work has brought to light some important lessons. New malware attacks like this can take down your entire environment. Learn from others mistakes on how to prevent Petya like worms.

Question has a verified solution.

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

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
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…

618 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