Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1148
  • Last Modified:

Multiple Selection List Algorithm

Hi,

i am trying to develope custom multiple selection enabled list with custom graphics.

i have succeeded regular non multiple selection list. But i don't have any idea how to do multiple selection.

What i need is, a basic algorithm of multiple selection list

thnks...
0
blacklord
Asked:
blacklord
1 Solution
 
cb1393Commented:
>> custom multiple selection enabled list with custom graphics

Are you talking about a select box/list that contains graphics within the options? I don't know that I've ever seen something like this in regular HTML. Are you developing in HTML or something like Flash or Java? Please elaborate.
0
 
GwynforWebCommented:
I am not sure what you need but multiple selects are done like so

<select multiple size="5">
  <option>abcd </option>
  <option>efghi </option>
  <option>jklmn </option>
  <option>opqrs </option>
  <option>yuvwx </option>
</select>
0
 
blacklordAuthor Commented:
i am trying to develop a list that has multiple selection enabled in javascript. i don't want to use <select> object.

what i am doing is when user clicks on element (in this case <td>), onclick event occurs and i call selectElm function from javascript. in that function i change the background image of the td element. until here there are no problems.

when user starts to select other elements, javascript will pass their id to an array. but if he selects an element that is already selected, javascript will go through array and delete it's id, etc.

is there any algorithm already developed for this?
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
dakydCommented:
Like the posters before me, I'm not sure I understand what you're trying to do.  Why do you need an array & why do you need to pass the id of the element clicked into that array?  If you want to show/hide a background image when a <td> is clicked, you can just do something like the following.  Hope that helps.

<html>
<head>
<script type="text/javascript">
window.onload = initClick;

function initClick()
{
  var tds = document.getElementById("tbl").getElementsByTagName("td");
  for (var i = 0, n = tds.length; i < n; i ++)
    tds[i].onclick = toggleBackground;
}

function toggleBackground()
{
  if (this.set)
  {
    this.style.background = "";
    this.set = false;
  }
  else
  {
    this.style.background = "url(test.jpeg)";
    this.set = true;
  }
}
</script>
<style type="text/css">
#tbl td {
  width: 100px;
  height: 100px;
}
</style>
</head>

<body>
<table id="tbl">
  <tr>
    <td>A</td>
  </tr>
  <tr>
    <td>B</td>
  </tr>
  <tr>
    <td>C</td>
  </tr>
  <tr>
    <td>D</td>
  </tr>
</table>
</body>
</html>
0
 
cb1393Commented:
The following doesn't use images, but acts like a multiple select list... hope it helps.

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JAVASCRIPT">
opCells = new Array('Option1','Option2','Option3','Option4','Option5','Option6')
selCells = new Array()
function selectCell(x,y){
      if(x){
            if(selCells[y]!=null){
                  selCells[y] = null
            } else {
                  selCells[y] = '#FF0000'
            }
      } else {
            selCells = new Array()
            selCells[y] = '#FF0000'
      }
      for(i=0;i<opCells.length;i++){
            var clickCell = eval('document.all.cellOp'+i)
            if(selCells[i]!=null){
                  clickCell.style.backgroundColor = selCells[i]
            }else{
                  clickCell.style.backgroundColor = '#FFFFFF'
            }
      }
}
function drawTable(){
      document.write('<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="1" WIDTH="100">')
      for(i=0;i<opCells.length;i++){
            document.write('<TR><TD ID="cellOp'+i+'" onClick="selectCell(window.event.ctrlKey,'+i+')" onSelectStart="window.event.returnValue = false">')
            document.write(opCells[i])
            document.write('</TD></TR>')
      }
      document.write('</TABLE>')
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JAVASCRIPT">
drawTable()
</SCRIPT>
</BODY>
</HTML>
0
 
blacklordAuthor Commented:
thanks cb1393, that is what exactly i want. But that doesn't work in firefox
0
 
blacklordAuthor Commented:
ok, i think i have done it with help of cb1393. here is what i have. Works in firefox and IE6, i don't have the others so i couldn't test on them.

javascript:

var selectedIdeaId = "";
var multipleSelect = 0;
var multipleIdeaArray = new Array();

var pictureNormalState = "0px 0px";
var pictureOverState = "0px -30px";
var pictureSingleSelectState = "0px -60px";
var pictureMultipleSelectState = "0px -90px";

function setPointer (theRow, theIdeaId, theAction) {
      if (theAction=="over") {
            if (theIdeaId != selectedIdeaId) {
                  if(theRow.style.backgroundPosition==pictureMultipleSelectState) {
                        theRow.style.backgroundPosition=pictureMultipleSelectState;
                  } else {
                        theRow.style.backgroundPosition=pictureOverState;
                  }
            }
      } else if (theAction=="out") {
            if (theIdeaId != selectedIdeaId) {
                  if(theRow.style.backgroundPosition==pictureMultipleSelectState) {
                        theRow.style.backgroundPosition=pictureMultipleSelectState;
                  } else {
                        theRow.style.backgroundPosition=pictureNormalState;
                  }
            }
      } else if (theAction=="click") {
            if (multipleSelect == 1) {
                  if(multipleIdeaArray[theIdeaId]!=null){
                        multipleIdeaArray[theIdeaId] = null;
                  } else {
                        multipleIdeaArray[theIdeaId] = "selected";
                  }
                  for(i=0;i<multipleIdeaArray.length;i++){
                        if(document.getElementById("lid"+i)!=null) {
                              var clickCell = document.getElementById("lid"+i);
                              if(multipleIdeaArray[i]=="selected"){
                                    clickCell.style.backgroundPosition=pictureMultipleSelectState;
                              } else if(multipleIdeaArray[i]=="single") {
                                    clickCell.style.backgroundPosition=pictureSingleSelectState;
                              } else {
                                    clickCell.style.backgroundPosition=pictureNormalState;
                              }
                        }
                  }
            } else {
                  if (selectedIdeaId=="" || selectedIdeaId!=theIdeaId) {
                        if (selectedIdeaId!="") {
                              document.getElementById("lid"+selectedIdeaId).style.backgroundPosition=pictureNormalState;
                        }
                        theRow.style.backgroundPosition=pictureSingleSelectState;
                        selectedIdeaId = theIdeaId;
                  } else {
                        theRow.style.backgroundPosition=pictureOverState;
                        selectedIdeaId = "";
                  }
            }
      }
}


and html code:

<table width="402px"  border="0" cellspacing="1" cellpadding="0" class="list">
<tr>
<td id="lid82" class="grey" onMouseover="setPointer(this,82,'over')" onMouseout="setPointer(this,82,'out')" onClick="setPointer(this,82,'click')"><p>Bla bla bla</p></td>
</tr>
<tr>
<td id="lid83" class="grey" onMouseover="setPointer(this,83,'over')" onMouseout="setPointer(this,83,'out')" onClick="setPointer(this,83,'click')"><p>Bla Bla bla</p></td>
</tr>
</table>
0
 
cb1393Commented:
Why the grade of B?

>>What i need is, a basic algorithm of multiple selection list

I provided you with code that accomplished this.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now