473,708 Members | 2,378 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Select element with no selected options

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
Jul 23 '05 #1
15 15475
On Wed, 27 Oct 2004 07:47:47 -0400, TJ Walls
<tj*****@mindsp ring.nospam.com > 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.
Jul 23 '05 #2
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
ph***********@v irgin.net
(Please remove the "z"s if replying by email)
Jul 23 '05 #3
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.
Jul 23 '05 #4
TJ

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
Jul 23 '05 #5
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.
Jul 23 '05 #6
TJ
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(le vel) {
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(le vel+1) + 2*(id - GetLevelBase(le vel)) + childnum;
return ans;
}
function GetParentID(id) {
var level = GetLevel(id);
var ans;
if (level <= 0) {
return -1;
}
ans = GetLevelBase(le vel-1) + (id - GetLevelBase(le vel) - (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="Updat eBox(' + 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.getEle mentById('box' + id);
if (level == sgLevels-2) {
for (i = 0; i < 2; i++) {
cid = GetChildID(id, i);
tmp = document.getEle mentById('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.getEle mentById('box' + cid);
me.options[i].value = tmp.options[tmp.selectedInd ex].value;
me.options[i].text = tmp.options[tmp.selectedInd ex].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(GetPa rentID(id), 0);
}
if (level == -1 || level > sgLevels-2) {
return;
}
changed = 0;
me = document.getEle mentById('box' + id);
val = me.options[me.selectedInde x].value;
for (i = 0; i < 2; i++) {
cid = GetChildID(id, i);
tmp = document.getEle mentById('box' + cid);
me.options[i].value = tmp.options[tmp.selectedInd ex].value;
me.options[i].text = tmp.options[tmp.selectedInd ex].value;
}
cid = GetChildID(id, me.selectedInde x);
tmp = document.getEle mentById('box' + cid);
if (val != tmp.options[tmp.selectedInd ex].value) {
UpdateBox(GetPa rentID(id), 0);
}
}
</script>

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

<body>
<form action="">
<input type="button"
name="foo"
value="foo"
onClick="alert( 'Fuck 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*wi d) + 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-8);
document.write( str);
InitBox(ct);

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

</form>
</body>
</html>
---------------------- <snip> -----------------------------------
Jul 23 '05 #7
TJ

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

Jul 23 '05 #8
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.
Jul 23 '05 #9
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><ti tle>Knockout Results</title>
<script type="text/javascript">
function togWin(x) {
if (document.getEl ementById(nextI s(x.id))
&& x.childNodes.le ngth != 0
&& document.getEle mentById(pairIs (x.id)).childNo des.length!=0) {

document.getEle mentById(nextIs (x.id)).innerHT ML=(x.childNode s[0].data);
var t = pairIs(nextIs(x .id));
if (!document.getE lementById(pair Is(nextIs(x.id) ))) {
document.getEle mentById(nextIs (x.id)).classNa me='winner';
alert('The winner is: '+x.childNodes[0].data);
}
if (x.className == 'competitor') {
x.className = 'winner';
document.getEle mentById(pairIs (x.id)).classNa me='competitor' ;
} } }
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="competit or" style="left: 0; top: 20px;"
onclick="togWin (this);">Steve</div>
<div id="1_2" class="competit or" style="left: 0; top: 42px;"
onclick="togWin (this);">Sam</div>

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

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

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

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

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

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

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

</div>
</body>
</html>
Jul 23 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
23211
by: Marek Mänd | last post by:
<select multiple style="height:200px;"> <option>a <option>b </select> Why does Mozilla draw the vertical scrollbar to the SELECT html element? There is plenty of void room below two OPTIONs in the SELECT box, so there is no need for that. How do i get the overflow:auto like thing working in mozilla based
9
11852
by: Prowler | last post by:
In our current application we have a page whose sole purpose for existence is to permit the user to select from a list (subsequent to our login page). We would like to have the list drop down automatically when the visitor arrives at the page, perhaps by using the onLoad event to call the dropdown code. The problem is, the click() event does not drop down the list, as I would have thought it might. I can successfully fire other methods...
13
2365
by: Oliver Hauger | last post by:
Hello, In my html form I show a select-element and if this element is clicked I fill it per JavaScript/DOM with option-elements. I use the following code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head>
2
2270
by: Rob Long | last post by:
Hi I have an HTML select element in my page and it's multiple property is disabled (one item at a time mode) but I still want to transfer all the items in the select to the server when the form is submitted. I'm using javascript to change the multiple property of the select element to true and then I'm looping through each option to change its selected property to true.
6
15635
by: artev | last post by:
if I have a select with more options, how I can know if is there an option selected; is necessary a cycle? or is there an inner property?
1
428
by: laredotornado | last post by:
Hi, What is a cross-browser way to get the size (number of visible items) of a SELECT element? If that is not possible, how would I determine if the element was of a MULTIPLE type or not? Thanks, - Dave
1
4869
by: CMani | last post by:
Hi, I have an select element which has hidden attribute for each of item. Say Employee Id are listed in List Box, the Name and gender are kept in value and ATTRIB respectively for each code in the list box . I want to display the Code, Name and gender of the selected Employee, so i wrote on change event for the select element and invoke the javascript to populate the values to the corresponding input text box. The Html Code is ...
0
8697
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9289
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9158
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
9001
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
7921
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6615
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5939
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4454
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
3151
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.