Solved

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

Posted on 2003-11-27
9
440 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
Technology Partners: 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 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

Industry Leaders: 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!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
convert Systemjs to Webpack 3 83
Link Anchor Not working 9 49
Validating number not work with decimal 4 27
Ajax on ASP 2 41
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
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 …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

726 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