PDA

Click to See Complete Forum and Search --> : Select - Clearing selected rows onchange

jeppe
06-10-2006, 05:04 AM
I have this select box:

<select name="calCompID" multiple onchange="chooseComp( this.options[this.selectedIndex].value );">

<option value="0">All companies</option>
<option value="1">Company 1</option>
<option value="2">Company 2</option>
<option value="3">Company 3</option>
...
</select>

How can I clear all the selected rows if the user select the first row (text: All companies) with the value 0?

Here is the pseudo javascript function:

function chooseComp( value ){

if ( value == 0 ){

alert ('Clearing all the other selected rows...');
}
}
wasim_@_drushti
06-10-2006, 05:32 AM
I have this select box:

<select name="calCompID" multiple onchange="chooseComp( this.options[this.selectedIndex].value );">

<option value="0">All companies</option>
<option value="1">Company 1</option>
<option value="2">Company 2</option>
<option value="3">Company 3</option>
...
</select>

How can I clear all the selected rows if the user select the first row (text: All companies) with the value 0?

Here is the pseudo javascript function:

function chooseComp( value ){

if ( value == 0 ){

alert ('Clearing all the other selected rows...');
}
}

can U be more descriptive
jeppe
06-10-2006, 05:41 AM
Lets say you first select (mark) the rows called "Company 1" and "Company 2". If you then afterwards select the row called "All companies", the row "Company 1" and "Company 2" shall automatically be unselected (unmarked) again.

Unselecting the other rows may only happen if you select the first row called "All companies"...
wasim_@_drushti
06-10-2006, 05:47 AM
You are increasing the Complexities. You can disable the multiselect option from the listbox. This will resolve your issue. OR USe radio buttons instead
jeppe
06-10-2006, 05:58 AM
I need to have the option to choose more than one company if needed.

If you want to send out a message to some companies, you can choose which of the companies to recieve this message. Either you can choose "All companies" and all the companies in the select box will recieve this message. OR you can choose the few companies that shall recieve this message.
wasim_@_drushti
06-10-2006, 06:14 AM
Try this out:

<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<script language="javascript">

function checkAll()
{

if(form1.all.checked)
{
form1.c1.checked=true;
form1.c2.checked=true;
form1.c3.checked=true;
}
else if(!form1.all.checked)
{
form1.c1.checked=false;
form1.c2.checked=false;
form1.c3.checked=false;

}

}
</script>
</head>

<body>

<form method="POST" name="form1">
<table border="0" width="37%" cellspacing="0" cellpadding="2">
<tr>
<td width="23"><input type="checkbox" name="all" value="ON" onclick="checkAll();"></td>
<td>Select All</td>
</tr>
<tr>
<td width="23"><input type="checkbox" name="c1" value="ON"></td>
<td>Option1</td>
</tr>
<tr>
<td width="23"><input type="checkbox" name="c2" value="ON"></td>
<td>Option2</td>
</tr>
<tr>
<td width="23"><input type="checkbox" name="c3" value="ON"></td>
<td>Option3</td>
</tr>
</table>
</form>

</body>

</html>
Orc Scorcher
06-10-2006, 07:14 AM
Strange UI, but it's your page. Replace the onchange attribute with onchange="chooseComp(this)" and use this function:function chooseComp(sel) {
with (sel.options)
if (item(0).selected)
for (var i = 1; i < length; ++i)
item(i).selected = false
}
wasim_@_drushti
06-10-2006, 07:59 AM
Strange UI, but it's your page. Replace the onchange attribute with onchange="chooseComp(this)" and use this function:function chooseComp(sel) {
with (sel.options)
if (item(0).selected)
for (var i = 1; i < length; ++i)
item(i).selected = false
}

I've tried to make the code as simple as possible so that the user doesn't face any complexities while implementing. He can modify it as per his requirement.
Orc Scorcher
06-10-2006, 12:01 PM
I've tried to make the code as simple as possible so that the user doesn't face any complexities while implementing. He can modify it as per his requirement.My reply was not a comment about your code but rather about jeppe's use of a select-multiple with one 'magic' option which behaves differently from all the others.
wasim_@_drushti
06-10-2006, 12:54 PM
My reply was not a comment about your code but rather about jeppe's use of a select-multiple with one 'magic' option which behaves differently from all the others.

OK, Sorry for the Misunderstaing
jeppe
06-11-2006, 09:00 AM
Okay thank you guys. I have reconsidered the UI after your comment. I have thought about two other solutions:

The first solution about making a checkbox list I donīt think is good, because if you have a big list of i.e. 100 companies, it will be a quite long list, and if the user wants to click 50 of these companies it will take to long time.

In the second solution we can remove the first silly row called "All companies" and say that if you donīt choose any of the companies in the select box list, a message will be send out to ALL companies. But then you donīt force the user to take a choice.

Do you have any other solutions, then I will appreciate your ideas?
Orc Scorcher
06-11-2006, 10:21 AM
I'd suggest to keep the select, but remove the All Companies option. Instead put one checkbox "All Companies" below the select which disables the select if it is checked.
jeppe
06-11-2006, 10:43 AM
Hi I have made that. A good solution. Thanks for your help...