«

Hello All,

Is it possible to create a <select> element with no selected options? I
have tried setting the selectedIndex attribute to -1, but as far as I can
tell this only works for <select multiple> elements.

Am I missing something obvious?

Sincerely,
TJ Walls
Ph.D. Candidate - Stony Brook University

On Wed, 27 Oct 2004 07:47:47 -0400, TJ Walls
<> wrote:

> Is it possible to create a <select> element with no selected options?

By not giving any OPTION elements the selected attribute, it is possible
for a user agent to initially have no initial value. However, for whatever
reason, most do select the first.

> I have tried setting the selectedIndex attribute to -1, but as far as I
> can tell this only works for <select multiple> elements.

Works for me in IE, Opera, and Firefox.

> Am I missing something obvious?

Perhaps. What exactly are you trying to acheive?

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

TJ Walls wrote:

> Hello All,
>
> Is it possible to create a <select> element with no selected options? I
> have tried setting the selectedIndex attribute to -1, but as far as I can
> tell this only works for <select multiple> elements.
>
> Am I missing something obvious?
>

You can if you like, but it would be pointless.

Take a look at the HTML specs:

> If no OPTION element has the selected attribute set, user agent behavior
> for choosing which option is initially selected is undefined.

How about adding <OPTION selected> </OPTION> to the start of your options
list?

--
Philip Ronan

(Please remove the "z"s if replying by email)

TJ Walls wrote:
> Hello All,
>
> Is it possible to create a <select> element with no selected options? I

User agent behaviour for an option list with nothing selected is
undefined, so if you do achieve it I suggest the results will be
unpredictable across different browsers.

The HTML specification says that you should ensure that one option is
selected - if none have the "selected" attribute, then the first option
should be selected.

> have tried setting the selectedIndex attribute to -1, but as far as I can
> tell this only works for <select multiple> elements.
>

This is a bad idea, as above.

> Am I missing something obvious?

Yes, the w3c HTML spec explicitly says don't do it:

<URL:http://www.w3.org/TR/REC-html40/interact/forms.html>


*17.6.1)*
"If no OPTION element has the selected attribute set, user agent
behavior for choosing which option is initially selected is
undefined. Note. Since existing implementations handle this case
differently, the current specification differs from RFC 1866 (
[RFC1866] section 8.1.3), which states:

The initial state has the first option selected, unless a SELECTED
attribute is present on any of the <OPTION> elements.

Since user agent behavior differs, authors should ensure that each
menu includes a default pre-selected OPTION ."


Fred.

Thank you all for the quick responses. I am in the process of teaching
myself JavaScript so your time is greatly appreciated.

>
> How about adding <OPTION selected> </OPTION> to the start of your options
> list?

Not really what I want to do ... I have a binary tree of select elements,
so if the selected value of a node changes and the selected value of the
parent node matches the previous (child) value I want to clear the parent
selection and not propagate the new value up the tree.

I guess my only recourse is to add a blank option, unless there is
something else painfully obvious that I am missing ...

Sincerely,
TJ Walls
Ph.D. Candidate - Stony Brook University

TJ wrote:
> Thank you all for the quick responses. I am in the process of teaching
> myself JavaScript so your time is greatly appreciated.

At present we've only discussed HTML...

>>How about adding <OPTION selected> </OPTION> to the start of your options
>>list?
>
> Not really what I want to do ... I have a binary tree of select elements,
> so if the selected value of a node changes and the selected value of the
> parent node matches the previous (child) value I want to clear the parent
> selection and not propagate the new value up the tree.
>
> I guess my only recourse is to add a blank option, unless there is
> something else painfully obvious that I am missing ...
>

Perhaps an option list is not the right thing to be using? Without a
bit of example code to show what you are trying to achieve, any
suggestions are just guessing. Even broken code that comes close may
do, or an example on a site somewhere.

Fred.

> At present we've only discussed HTML...
>

Fair enough ...

> Perhaps an option list is not the right thing to be using? Without a
> bit of example code to show what you are trying to achieve, any
> suggestions are just guessing. Even broken code that comes close may
> do, or an example on a site somewhere.

Unfortunately, I still have not setup my web server yet (still playing
with the BSD setup ...), so in case you have a moment to look at this,
I'll post it here.

This does _basically_ what I want. It creates a binary competition tree
and has a user select from this initial pool of competitors all the
winners to a final champion.

The problems are:
1) I don't want the tree to start populated ... I want to force the
user to select all winners.

2) If a user selects a winner to be champion (say, in this test script
team1), then goes back and selects a team to defeat team1 (say team2),
then team2 is propagated up the tree. I would like to clear the user
selections above that change (if it affects the parent node)
and force a re-selection.

Any comments on the script are more than welcome, and with my
apologies:

--------------------------- <snip> ----------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
var sgLevels = 4;
function IPow(base, exp) {
var i, ans;
if (exp < 0) {
return 0;
}
ans = 1;
for (i = 0; i < exp; i++) {
ans *= base;
}
return ans;
}
function GetLevel(id) {
var elements = IPow(2, (sgLevels-1));
var i;
for (i = sgLevels-1; i >= 0; i--) {
if (id < elements) {
return i;
}
id -= elements;
elements /= 2;
}
return -1;
}
function GetLevelBase(level) {
var elements = 0;
var i = 0;
for (i = sgLevels-1; i > level; i--) {
elements += IPow(2, i);
}
return elements;
}
function GetChildID(id, childnum) {
var level = GetLevel(id);
var ans;
if (level == -1 || level == sgLevels-1) {
return -1;
}
ans = GetLevelBase(level+1) + 2*(id - GetLevelBase(level)) + childnum;
return ans;
}
function GetParentID(id) {
var level = GetLevel(id);
var ans;
if (level <= 0) {
return -1;
}
ans = GetLevelBase(level-1) + (id - GetLevelBase(level) - (id%2))/2;
return ans;
}

function PosTeam(id, name, left, top) {
var tag = '"team' + id + '"';
var command = '<p style="position:absolute; left:' + left + '; top:' + top + '" ';
command += 'id=' + tag + 'name=' + tag + '>' + name + '</p>';
return command;
}

function PosBox(id, left, top, width) {
var tag = '"box' + id + '"';
var command = '<select style="position:absolute; left:' + left + '; top:' + top + '; width:' + width + '" ';
command += 'id=' + tag + ' name=' + tag + ' onChange="UpdateBox(' + id + ', 1);"><option></option><option></option></select>';
return command;
}

function InitBox(id) {
var level = GetLevel(id);
var tmp;
var cid;
var me;
var i;
if (level == -1 || level == sgLevels-1) {
return;
}

me = document.getElementById('box' + id);
if (level == sgLevels-2) {
for (i = 0; i < 2; i++) {
cid = GetChildID(id, i);
tmp = document.getElementById('team' + cid);
me.options[i].value = tmp.innerHTML;
me.options[i].text = tmp.innerHTML;
}
} else {
for (i = 0; i < 2; i++) {
cid = GetChildID(id, i);
tmp = document.getElementById('box' + cid);
me.options[i].value = tmp.options[tmp.selectedIndex].value;
me.options[i].text = tmp.options[tmp.selectedIndex].value;
}
}
}

function UpdateBox(id, first) {
var level = GetLevel(id);
var tmp;
var cid;
var me;
var i;
var changed;
var val;
if (first == 1) {
UpdateBox(GetParentID(id), 0);
}
if (level == -1 || level > sgLevels-2) {
return;
}
changed = 0;
me = document.getElementById('box' + id);
val = me.options[me.selectedIndex].value;
for (i = 0; i < 2; i++) {
cid = GetChildID(id, i);
tmp = document.getElementById('box' + cid);
me.options[i].value = tmp.options[tmp.selectedIndex].value;
me.options[i].text = tmp.options[tmp.selectedIndex].value;
}
cid = GetChildID(id, me.selectedIndex);
tmp = document.getElementById('box' + cid);
if (val != tmp.options[tmp.selectedIndex].value) {
UpdateBox(GetParentID(id), 0);
}
}


</script>

<title>Tester Tree</title>
</head>

<body>
<form action="">
<input type="button"
name="foo"
value="foo"
onClick="alert('**** You');">
</form>

<form name="myform" action="">
<script type="text/javascript">
var str;
var i, j, ct;
var len = 100;
var wid = 40;
var stop;
var space = 1;
var linetop;

ct = 0;
stop = IPow(2, sgLevels - 1);
for (i = 0; i < sgLevels; i++) {
for (j = 0; j < stop; j++) {
linetop = ((j+1)*space*wid) + 100 - (wid/2)*(space-1);
if (i == 0) {
str = PosTeam(j, 'team' + (j+1), 3, linetop-33);
document.write(str);
} else {
str = PosBox(ct, (i*len)+3, linetop-25, len-;
document.write(str);
InitBox(ct);

}
ct++;
}
stop /= 2;
space *= 2;
}
</script>

</form>
</body>
</html>
---------------------- <snip> -----------------------------------

I should note that I apologize for the vulgarity on the "foo" button ...
I tend to get grumpy when I code late at night and thus tend to make my
programs grumpy with me. I meant to delete that button before posting,
again, I apologize.

Sincerely,
TJ Walls
Ph.D. Candidate - Stony Brook University

TJ wrote:
> I should note that I apologize for the vulgarity on the "foo" button ...

Apology accepted...<fx: sound of gasping, body crumples to floor>

Your problem is interesting, I imagine the best solution is to use a
<DIV> for each contestant and CSS to position them on the page in
the right place. An onclick could populate the next round.

You could use CSS to change the style of the winner of each contest
(say bold the text and change the background colour) with styles
contestant (initial state, result not known), winner and loser. I'm
sure empty the tree structure could be built so that it appears on load
and is filled in as you pick winners - playing with the borders should
do this.

It should also be possible to give each contestant DIV an id that
identifies the round and contestant, e.g. 1_1 and 1_2 for the first
two players in round 1. The winner moves to 2_1. The winner of 1_3
and 1_4 moves to 2_2, etc.

If a winner changes, you can remove them from all subsequent matches
and return the other player to "contestant" style.

The only issue I have with onclick is that if the user accidentally
clicks on a round 2 match after the tree is complete, all subsequent
matches will be affected. This is quite drastic if it was not
intended, so you may want to have a prompt in this case or some other
way of allowing the user to select a winner, then a second click to
propagate the "win" through the tree.

You should be able to pass the players in a meta tag, then
build the entire competition tree using JavaScript. Of course, anyone
with JS disabled won't see anything, but this is dependent on JS
anyway.

I would also increase the size of the text as the series progresses, as
the tree becomes quite sparse with only a few iterations.

Finally, have you figured out how to send the results to the server?
The above would allow you to grab all the DIVs, then send the id and
content to the server so you know the contestants for each match and
the style will indicate the winner (or you could infer it from the
contestant that made it into the next round).

I'll post a bit of code later on...

Cheers, Rob.

TJ wrote:
[snip]

See if this does what you want. Beware some wrapping, it should be OK
after the first few lines. It doesn't clear the parent tree if you
change a lower node, but everything else works.

Click on a player to make them a winner. They can only be a winner if
they have an opponent. If they are a winner, they are promoted to the
next round. Clicking on an empty node, or one that doesn't have an
opponent yet, will do nothing. You may want an alert at these points,
but I find them annoying so maybe write a warning in the page instead.

The div ids are used as keys to the position of each node in the tree.
This thing will only work with a perfect tree - it must start with 2^n
players or it won't work. You could potentially add in players to
later rounds, but you'd have to adjust the div keys accordingly.

Please excuse the CSS and styles - this is just a prototype example, I
don't know much about CSS yet other than basic styles (hey, I only just
learned the ":empty" tag). I've used px for dimensions 'cos otherwise
IE and Firefox look very different - expect the CSS puritans to moan
about that...

Cheers, Rob.

<html><head><title>Knockout Results</title>
<script type="text/javascript">
function togWin(x) {
if (document.getElementById(nextIs(x.id))
&& x.childNodes.length != 0
&& document.getElementById(pairIs(x.id)).childNodes.l ength!=0) {

document.getElementById(nextIs(x.id)).innerHTML=(x .childNodes[0].data);
var t = pairIs(nextIs(x.id));
if (!document.getElementById(pairIs(nextIs(x.id)))) {
document.getElementById(nextIs(x.id)).className='w inner';
alert('The winner is: '+x.childNodes[0].data);
}
if (x.className == 'competitor') {
x.className = 'winner';
document.getElementById(pairIs(x.id)).className='c ompetitor';
} } }
function pairIs(p) {
var b = p.split('_');
(b[1]%2 == '1')?b[1]-=-1:b[1]-=1;
return b.join('_');
}
function nextIs(n) {
var a = n.split('_');
a[1] = Math.floor((+a[1]+1)/2);
a[0] = +a[0]+1;
return a.join('_');
}
</script>
<style type="text/css">
body {
font-family: sans-serif;
margin-left: 40; margin-top: 10;}
..competitor, .winner {
font-size: 12px;
font-family: sans-serif;
width: 100px;
height: 20px;
border-top: 1px solid #eee;
border-left: 1px solid #eee;
border-bottom: 1px solid black;
border-right: 1px solid black;
position: absolute;
text-align: left;
}
div:empty {
background-color: #eee;
font-weight: normal;
}
..competitor {
background-color: #eee;
font-weight: normal;
}
..winner {
background-color: white;
font-weight: bold;
}
..head {
font-size: 14px;
width: 100px;
height: 20px;
background-color: white;
position: absolute;
font-weight: bold
}
</style>
</head>
<body>
<div style="position: relative; top:10px;">
<div class="head" style="left: 0; top: 0px;">Round 1</div>
<div class="head" style="left: 101; top: 0px;">Round 2</div>
<div class="head" style="left: 202; top: 0px;">Round 3</div>
<div class="head" style="left: 303; top: 0px;">Round 4</div>

<!-- Round One -->
<div id="1_1" class="competitor" style="left: 0; top: 20px;"
onclick="togWin(this);">Steve</div>
<div id="1_2" class="competitor" style="left: 0; top: 42px;"
onclick="togWin(this);">Sam</div>

<div id="1_3" class="competitor" style="left: 0; top: 80px;"
onclick="togWin(this);">Sally</div>
<div id="1_4" class="competitor" style="left: 0; top: 102px;"
onclick="togWin(this);">Wendy</div>

<div id="1_5" class="competitor" style="left: 0; top: 140px;"
onclick="togWin(this);">Peter</div>
<div id="1_6" class="competitor" style="left: 0; top: 162px;"
onclick="togWin(this);">Ivana</div>

<div id="1_7" class="competitor" style="left: 0; top: 200px;"
onclick="togWin(this);">Katcha</div>
<div id="1_8" class="competitor" style="left: 0; top: 222px;"
onclick="togWin(this);">Abdulla</div>
<div class="space"></div>

<!-- Round Two -->
<div id="2_1" class="competitor"
style="position: absolute; left: 102px; top: 30px;"
onclick="togWin(this);"></div>
<div id="2_2" class="competitor"
style="position: absolute; left: 102px; top: 90px;"
onclick="togWin(this);"></div>

<div id="2_3" class="competitor"
style="position: absolute; left: 102px; top: 150px;"
onclick="togWin(this);"></div>
<div id="2_4" class="competitor"
style="position: absolute; left: 102px; top: 210px;"
onclick="togWin(this);"></div>

<!-- Round Three -->
<div id="3_1" class="competitor"
style="position: absolute; left: 200px; top: 60px;"
onclick="togWin(this);"></div>
<div id="3_2" class="competitor"
style="position: absolute; left: 200px; top: 180px;"
onclick="togWin(this);"></div>

<!-- Round Four -->
<div id="4_1" class="competitor"
style="position: absolute; left: 300px; top: 120px;"
onclick="togWin(this);"></div>

</div>
</body>
</html>