<select..onchange() > with only one <option>

  • Thread starter The Natural Philosopher
  • Start date
T

The Natural Philosopher

This is a nasty one and I can't see my way out of it.

I have a bunch of select statements in a form, and each select statement
has an onchange="do_something(this)" in it, and this works
nicely..except when there is only ONE OPTION in a given select.
It seems you cannot 'onchange' a single option!

Well, that is reasonable.

The trouble is I have no way of selecting it since the form itself is a
dummy: The form action is basically to submit to a new script with
hidden variables carefully set to get the desired action depending on
the last option selected..

onclick() in the <option> itself doesn't work for IE6...

Can anyone think of a way to achieve what I want?


The fragment in question is this one

<TR><TD align="center"><b>Julian's Projects</b></td>
<TD align="center"><select STYLE="width: 200px" name="project_id"
onchange="select_project_id(this)">
<OPTION value= "13" >ME-262 (Sep 13th 07)</OPTION>
</select></TD></TR>

This works stunningly with more than one option..but falls apart with
just one.

The option of making the single option SELECTED is a non starter, as
there are other options in other select statements that deselect this
one..once deselected I can't ever get it back!

I think I tried an onclick() on the whole select thing, but it didn't
work too well.
 
T

The Natural Philosopher

The said:
This is a nasty one and I can't see my way out of it.

I have a bunch of select statements in a form, and each select statement
has an onchange="do_something(this)" in it, and this works
nicely..except when there is only ONE OPTION in a given select.
It seems you cannot 'onchange' a single option!

Well, that is reasonable.

The trouble is I have no way of selecting it since the form itself is a
dummy: The form action is basically to submit to a new script with
hidden variables carefully set to get the desired action depending on
the last option selected..

onclick() in the <option> itself doesn't work for IE6...

Can anyone think of a way to achieve what I want?


The fragment in question is this one

<TR><TD align="center"><b>Julian's Projects</b></td>
<TD align="center"><select STYLE="width: 200px" name="project_id"
onchange="select_project_id(this)">
<OPTION value= "13" >ME-262 (Sep 13th 07)</OPTION>
</select></TD></TR>

This works stunningly with more than one option..but falls apart with
just one.

The option of making the single option SELECTED is a non starter, as
there are other options in other select statements that deselect this
one..once deselected I can't ever get it back!

I think I tried an onclick() on the whole select thing, but it didn't
work too well.
Click to expand...

Hmm., I seem to have fixed it by replacing onchange() with onclick()

It seems that onclick(this) picks up the correct value in
this.SelectedIndex..

Oh well. The ways of Javascript passeth man's understanding etc.
 
D

David Mark

This is a nasty one and I can't see my way out of it.

I have a bunch of select statements in a form, and each select statement
has an onchange="do_something(this)" in it, and this works
nicely..except when there is only ONE OPTION in a given select.
It seems you cannot 'onchange' a single option!

Well, that is reasonable.

The trouble is I have no way of selecting it since the form itself is a
dummy: The form action is basically to submit to a new script with
hidden variables carefully set to get the desired action depending on
the last option selected..

onclick() in the <option> itself doesn't work for IE6...

Can anyone think of a way to achieve what I want?
Click to expand...

Why use a select at all if there is only one option? Wouldn't a
hidden input make more sense?
 
T

The Natural Philosopher

David said:
Why use a select at all if there is only one option? Wouldn't a
hidden input make more sense?
Click to expand...

Firstly because once the user has added more stuff there IS more than
one option, and secondly because there are more options in more boxes
elsewhere.

I used SELECT/OPTION as a handy way of generating various pop up lists
without going to deep into Javascript.

There are several lists, all with one or more options..I need to select
ONE item from ALL the lists and go with that.


The javascript associated with the onchange() or onclick() stuff does
indeed patch in a value to a hidden variable anyway.

Anyway, using onclick() worked except the client is saying it doesn't in
IE7 and I haven't got that to test with. Ah well.

If all else fails I may ye write it with pure javascript pop up klists
and ditch option/select altogether..
 
L

Lee

The Natural Philosopher said:
This is a nasty one and I can't see my way out of it.

I have a bunch of select statements in a form, and each select statement
has an onchange="do_something(this)" in it, and this works
nicely..except when there is only ONE OPTION in a given select.
It seems you cannot 'onchange' a single option!
Click to expand...

So you have the same problem if their choice happens to be the
default selection.
The traditional solution is to provide a dummy first option
with text like "Choose one..." and make your onchange handler
return without action if selectedIndex<1


--
 
T

The Natural Philosopher

Lee said:
The Natural Philosopher said:

So you have the same problem if their choice happens to be the
default selection.
The traditional solution is to provide a dummy first option
with text like "Choose one..." and make your onchange handler
return without action if selectedIndex<1
Click to expand...
As I said, onclick works..its perfect on my selection of browsers..just
need to see whats happening in Ie7.

The user who reported it is not that computer savvy, so the problem
report is indecipherable till I get on site next week.,
 
T

Tim B

The Natural Philosopher said:
As I said, onclick works..its perfect on my selection of browsers..just
need to see whats happening in Ie7.

The user who reported it is not that computer savvy, so the problem
report is indecipherable till I get on site next week.,
Click to expand...

Why would the user click it if there is only one option?
 
T

The Natural Philosopher

Tim said:
Why would the user click it if there is only one option?
Click to expand...
Because as I have patiently explained, there are other options in other
select windows. These are all mutually exclusive.

It turned out to be easier to have multiple windows each with its own
drop down menu, than one enormous scrolling window.

Basically projects - assocaitionns of files and images - are held on a
per user basis.

The master library view lists all the users (who have projects), and
each user has his project set in a window. You select one project in one
window, and then go to it to do whatever.

So is perfectly possible to select a one of many option from a window
with only one element.

As I say, right now <select onclick="select_from(this)">
<option value="x"> I am a lonely option</option>
</select>

works well enough..this.selectedIndex.valueis set correctly if the user
clicks on the box. In firefox, IE6 and Safari.

Well play with it if you like..


<script type="text/javascript" language="JavaScript">
function selectproject()
{
document.getElementsByName("select_project")[0].value="yes";
if(document.getElementsByName("selected_project_id")[0].value=="")
alert("You didn't select a project to edit!!\n");
else document.forms[0].submit();
}
function newproject()
{
document.getElementsByName("selected_project_id")[0].value="";
document.getElementsByName("select_project")[0].value="yes";
document.forms[0].submit();
}

function select_project_id(here)
{
index=here.selectedIndex;
id=here[index].value;
for(i=0;i< document.forms[0].project_id.length;i++)
{
for (j=0;j<document.forms[0].project_id.length;j++)

document.forms[0].project_id.options[j].style.color="white";
document.forms[0].project_id.style.color="white";
}
here.style.color="yellow";
here[index].style.color="yellow";
document.getElementsByName("selected_project_id")[0].value=id;
}

</script>
<CENTER><TABLE border="0">
<TR><TD width="200px" height="55px" align="center" valign="center"
class="button" >
<b class="s3" onclick=" newproject()" onmouseover="this.className='s4'"
onmouseout="this.className='s3'">NEW PROJECT</b></TD>

<TD height="55px" align="center" valign="center" class="button" >
<b class="s3" onclick=" selectproject()"
onmouseover="this.className='s4'" onmouseout="this.className='s3'">EDIT
SELECTED</b></TD></TR>
<TR><TD align="center"><b>Joe Smith's Projects</b></td>
<TD align="center"><select STYLE="width: 200px" name="project_id"
onclick="select_project_id(this)">
<OPTION value= "11" >More testicles (Sep 4th 07)</OPTION>
<OPTION value= "8" >Database project (Sep 3rd 07)</OPTION>
</select></TD></TR>
<TR><TD align="center"><b>Mike's Projects</b></td>
<TD align="center"><select STYLE="width: 200px" name="project_id"
onclick="select_project_id(this)">
<OPTION value= "5" >another test project (Sep 1st 07)</OPTION>
<OPTION value= "6" >Further tests (Aug 30th 07)</OPTION>

</select></TD></TR>
<TR><TD align="center"><b>Fellow's Projects</b></td>
<TD align="center"><select STYLE="width: 200px" name="project_id"
onclick="select_project_id(this)">
<OPTION value= "12" "Bleriot" (Sep 5th 07)</OPTION>
<OPTION value= "7" >Miles Away (Sep 3rd 07)</OPTION>
<OPTION value= "4" >Test project (Sep 2nd 07)</OPTION>
</SELECT></TD></TR></table>
<input type="hidden" name="selected_project_id" value="">
<input type="hidden" name="select_project" value="no">
</FORM>
 
T

The Natural Philosopher

pr said:
Not if you use the keyboard it doesn't.
Click to expand...

Wasn't able to use the keyboard to do anything anyway in this case.

The help screen tells you to click...;-)
 
D

David Mark

Firstly because once the user has added more stuff there IS more than
one option, and secondly because there are more options in more boxes
elsewhere.
Click to expand...

Then you would change the UI at the point where there is more than one
option. Other options in other boxes don't enter into it unless those
are what trigger the change in the UI.

I used SELECT/OPTION as a handy way of generating various pop up lists
without going to deep into Javascript.
Click to expand...

It sounds more like you used form elements because you need to
populate and submit a form.
There are several lists, all with one or more options..I need to select
ONE item from ALL the lists and go with that.
Click to expand...

But if one has only one option, then it doesn't need a visible form
element.
The javascript associated with the onchange() or onclick() stuff does
indeed patch in a value to a hidden variable anyway.
Click to expand...

So your select with one option could just be a hidden input to start
with.
Anyway, using onclick() worked except the client is saying it doesn't in
IE7 and I haven't got that to test with. Ah well.
Click to expand...

The onclick event does not indicate a change of the input element's
value.
If all else fails I may ye write it with pure javascript pop up klists
and ditch option/select altogether..
Click to expand...

If you need to populate and submit a form, then I think you should use
a form.
 
D

David Mark

The underlying problem is that you are not very HTML or script savvy.
Because as I have patiently explained, there are other options in other
select windows. These are all mutually exclusive.
Click to expand...

The problem is that your explanations are indecipherable.
It turned out to be easier to have multiple windows each with its own
drop down menu, than one enormous scrolling window.
Click to expand...

Selects are not dropdown menus, nor are they windows.
Basically projects - assocaitionns of files and images - are held on a
per user basis.

The master library view lists all the users (who have projects), and
each user has his project set in a window. You select one project in one
window, and then go to it to do whatever.

So is perfectly possible to select a one of many option from a window
with only one element.
Click to expand...

Despite all of these explanations, it still isn't clear to me what you
are trying to do or why you feel the need to use a single-option
select.
As I say, right now <select onclick="select_from(this)">
<option value="x"> I am a lonely option</option>
</select>

works well enough..this.selectedIndex.valueis set correctly if the user
clicks on the box. In firefox, IE6 and Safari.
Click to expand...

So you are using an onclick event to "detect" when an input element
that has one option has "changed."
Well play with it if you like..
Click to expand...

No thanks. Start over with a proper HTML form that works without
scripting. Then think about how you could enhance it with client side
script.
<script type="text/javascript" language="JavaScript">
function selectproject()
{
document.getElementsByName("select_project")[0].value="yes";
if(document.getElementsByName("selected_project_id")[0].value=="")
alert("You didn't select a project to edit!!\n");
else document.forms[0].submit();
}
function newproject()
{
document.getElementsByName("selected_project_id")[0].value="";
document.getElementsByName("select_project")[0].value="yes";
document.forms[0].submit();
}

function select_project_id(here)
{
index=here.selectedIndex;
id=here[index].value;
for(i=0;i< document.forms[0].project_id.length;i++)
{
for (j=0;j<document.forms[0].project_id.length;j++)

document.forms[0].project_id.options[j].style.color="white";
document.forms[0].project_id.style.color="white";
}
here.style.color="yellow";
here[index].style.color="yellow";
document.getElementsByName("selected_project_id")[0].value=id;
}

</script>
<CENTER><TABLE border="0">
<TR><TD width="200px" height="55px" align="center" valign="center"
class="button" >
<b class="s3" onclick=" newproject()" onmouseover="this.className='s4'"
onmouseout="this.className='s3'">NEW PROJECT</b></TD>

<TD height="55px" align="center" valign="center" class="button" >
<b class="s3" onclick=" selectproject()"
onmouseover="this.className='s4'" onmouseout="this.className='s3'">EDIT
SELECTED</b></TD></TR>
<TR><TD align="center"><b>Joe Smith's Projects</b></td>
<TD align="center"><select STYLE="width: 200px" name="project_id"
onclick="select_project_id(this)">
<OPTION value= "11" >More testicles (Sep 4th 07)</OPTION>
<OPTION value= "8" >Database project (Sep 3rd 07)</OPTION>
</select></TD></TR>
<TR><TD align="center"><b>Mike's Projects</b></td>
<TD align="center"><select STYLE="width: 200px" name="project_id"
onclick="select_project_id(this)">
<OPTION value= "5" >another test project (Sep 1st 07)</OPTION>
<OPTION value= "6" >Further tests (Aug 30th 07)</OPTION>

</select></TD></TR>
<TR><TD align="center"><b>Fellow's Projects</b></td>
<TD align="center"><select STYLE="width: 200px" name="project_id"
onclick="select_project_id(this)">
<OPTION value= "12" "Bleriot" (Sep 5th 07)</OPTION>
<OPTION value= "7" >Miles Away (Sep 3rd 07)</OPTION>
<OPTION value= "4" >Test project (Sep 2nd 07)</OPTION>
</SELECT></TD></TR></table>
<input type="hidden" name="selected_project_id" value="">
<input type="hidden" name="select_project" value="no">
</FORM>- Hide quoted text -

- Show quoted text -
Click to expand...
 
L

Lee

The Natural Philosopher said:
Because as I have patiently explained, there are other options in other
select windows. These are all mutually exclusive.
Click to expand...

You haven't explained why, if one of the select objects is already
showing the value that the user wants to choose, they should be
expected click on it.

That's not how people are used to interacting with selection lists.

Explaining that "you have to treat these select objects differently
than any others that you've used" probably isn't the best design.


--
 
A

Aaron Saray

The Natural Philosopher said the following on 9/27/2007 6:00 AM:



It should be a hoot to watch you try to write a "pure javascript popup
klists" (whatever a klist is) when you can't even understand why your
present code doesn't work.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ -http://jibbering.com/faq/index.html
Javascript Best Practices -http://www.JavascriptToolbox.com/bestpractices/
Click to expand...

There is a lot here - and a lot of misunderstanding / communication
issues perhaps? Anyways, here are my thoughts:

You may want to write a script that executes body.onload to check any
of those select boxes and populate the hidden input fields with the
current index selected of each drop down (this fits into what I
_THINK_ you're trying to do...)

Another thing is to know dynamically in your generating script if you
have only one option. If it is, generate all of the content ahead of
time (ie, fill your hidden inputs, make the select box possibly a
dummy - with no id/name, etc...)
 
M

matatunos

<TD align="center"><select STYLE="width: 200px" name="project_id"
onchange="select_project_id(this)">
<OPTION value= "13" >ME-262 (Sep 13th 07)</OPTION>
</select></TD></TR>
Click to expand...

i think this may help

<select STYLE="width: 200px" id="project_id" name="project_id"
onchange="select_project_id(this)">
<OPTION value="" selected="selected">-[Select a project]-</OPTION>
<OPTION value="13">ME-262 (Sep 13th 07)</OPTION>
</select>


var f=document.getElementById("formname");
if(f.project_id.options[f.project_id.selectedIndex].value=="")
alert("You didn't select a project to edit!!\n");
 
T

The Natural Philosopher

Oh I understand why it doesn't work all right.

As I said in my original post.

However as I also said, it now does. To the specification I want anyway.


Sorry for not replying earlier. Been on a short holiday.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How to display input options only after selecting an option from the 'select class' tag JS? 6
Only one table shows up with the information 2
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
onChange without using select? 1
Show/Hide HTML Table Columns using SELECT option 1

Members online

Total: 95 (members: 3, guests: 92)
Robots: 453

Forum statistics

Threads
473,995
Messages
2,570,230
Members
46,818
Latest member
Brigette36

Latest Threads

Top