<div> inside <select></select> tags?

[Richie M]

Hi,

I have a form with three drop down select boxes in it. I'd like the
second box to populate when an option is selected in the first, and
for the third to populate when an option is selected from the second.

In the first select box, I use onchange to call a php script:

<select id='box1' onchange="ajaxUpdater('ajax_regions', '/ajax/
populate.php?show=month&id=' + getsel('box1')">
<option>something</option>
</select>

Now,
<select id="box2" onchange="ajaxUpdater('ajax_day', '/ajax/
populate.php?show=day&month=' + getsel('box2')">
<div id='ajax_regions'></div>
</select>

, doesn't work, so I'm forced to use:

<div id='ajax_regions'>
<select id="box2">
</select>
</div>

, and get my php code to output something like:

<select id='box2' onchange="ajaxUpdater('ajax_day', '/ajax/
populate.php?show=day&month=' + getsel('box2')">
<option>1</option>
</select>

Unfortunately, the onchange in the second select box doesn't fire. Is
this because it doesn't parse the javascript outputted by the php
code?

Is there a way around this? Or perhaps a solution to the div inside
select problem?

Thanks in advance!

[T.J. Crowder]

Hi Richie,

> Now,
> <select id="box2" onchange="ajaxUpdater('ajax_day', '/ajax/
> populate.php?show=day&month=' + getsel('box2')">
> <div id='ajax_regions'></div>
> </select>
>

> , doesn't work...

That's because it's invalid HTML. You can't put divs inside select
elements. I'm pretty sure only option and optgroup are allowed, but
in any case I'm certain div isn't. You can use the W3C Markup
Validator[1] to keep your HTML valid.

[1] http://validator.w3.org

With your updated example of the select box within the div and
replaced via an Ajax.Updater: Using innerHTML to create form elements
doesn't work reliably, and under the covers Ajax.Updater uses
Element#update, which uses innerHTML. Separate from your specific
problem of the event handler not being called (that could be easily
solved using Event#observe), you'll run into issues with some browsers
not recognizing the replaced select box at all. You pretty much have
to add form elements using DOM methods (appendChild and the like).

I take it the goal is to change the options available within the
select box when the value changes? (OT: Doesn't that make for a
jittery user experience?) Rather than using HTML, I think you're
better off manipulating the options array of the select box directly.
It's been years since I did that, so I'm sure what I used to do is old-
fashioned -- I'll leave it to you to Google changing the options, or
for someone who's done it more recently to chime in.

So, not a complete answer, but hopefully it's useful to know what's
going wrong...

HTH,
--
T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available

[eulerss]

i think that your problem is in this line

<select id="box2" onchange="ajaxUpdater('ajax_day', '/ajax/
populate.php?show=day&month=' + getsel('box2')">
<div id='ajax_regions'></div>
</select>

as far as i know you cannot use a div inside a select, check this link
for help

http://mmonreal.wordpress.com/2007/11/

> > Thanks in advance!- Ocultar texto de la cita -
>
> - Mostrar texto de la cita -

[RobG]

On Feb 4, 10:41 am, Richie M <i...@linuxbox.co.uk> wrote:
> Hi,
>
> I have a form with three drop down select boxes in it. I'd like the
> second box to populate when an option is selected in the first, and
> for the third to populate when an option is selected from the second.
>
> In the first select box, I use onchange to call a php script:
>
> <select id='box1' onchange="ajaxUpdater('ajax_regions', '/ajax/
> populate.php?show=month&id=' + getsel('box1')">

Apart from the invalid HTML (pointed out by TJ), it is very unwise to
use an onchange handler with a select element if there is any chance
the form will be used in IE. If a user tries to navigate the options
using the cursor keys in IE, a change event will fire each time the
key is pressed and changes the selected option - I don't think that is
what you want.

I don't know what the getsel function does, however I suspect you are
using the ID attribute inappropriately. Option elements have a value
attribute[1] that is supposed to be used to send data to the server,
select elements have a DOM value property that is determined from the
selected option, so why not use:

<select onblur="ajaxUpdater(... + this.value);">
<option value="value 0">value 0
<option value="value 1">value 1
<option value="value 2">value 2
</select>


Or use an explicit "update the form" button.

1. The text attribute can be used to, however due to IE's non-
compliance with the W3C standard relating to use of text as the option
value, it is easier to explicitly use the value attribute.


--
Rob