HTML::O...:Select(3)

📦 version 0.6.0, in alpine 3.24

💅 HTML::Object::DOM::Element::Select(3) — User Contributed Perl Documentation ✨

Okay so welcome to the HTML::Object::DOM::Element::Select manual page, bestie! This is from the User Contributed Perl Documentation, and it’s literally all about the class that handles <select> HTML elements. No cap, this page ate and left no crumbs.

🌸 NAME 🌸

HTML::Object::DOM::Element::Select — HTML Object DOM Select Class. That’s the name, and it’s iconic.

🎀 SYNOPSIS 🎀

Okay so to summon one of these bad boys:

use HTML::Object::DOM::Element::Select;
my $select = HTML::Object::DOM::Element::Select->new ||
    die( HTML::Object::DOM::Element::Select->error, "\n" );

⭐ VERSION ⭐

v0.2.0

🦋 DESCRIPTION 🦋

This interface is the main character for a <select> HTML element. These elements also share all of the properties and methods of other HTML elements via the HTML::Object::DOM::Element interface. So yes, it’s got family connections, bestie.

👑 INHERITANCE 👑

The family tree is giving dynastic, fr fr:

+-----------------------+     +---------------------------+     +-------------------------+     +----------------------------+     +------------------------------------+
| HTML::Object::Element | --> | HTML::Object::EventTarget | --> | HTML::Object::DOM::Node | --> | HTML::Object::DOM::Element | --> | HTML::Object::DOM::Element::Select |
+-----------------------+     +---------------------------+     +-------------------------+     +----------------------------+     +------------------------------------+

✨ PROPERTIES ✨

Inherits properties from its parent HTML::Object::DOM::Element. Yep, inherited, bestie.

🌟 autofocus 🌟

A boolean value that reflects the autofocus HTML attribute. It indicates whether the control should have input focus when the page loads, unless the user overrides it — for example, by typing in a different control.

Only one form-associated element in a document can have this attribute specified. That’s the rule, no cap.

Example:

<select id="mySelect" autofocus>
    <option>Option 1</option>
    <option>Option 2</option>
</select>

# Check if the autofocus attribute on the <select>
my $hasAutofocus = $doc->getElementById('mySelect')->autofocus;

See also Mozilla documentation <https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/autofocus>

💀 disabled 💀

A boolean value reflecting the disabled HTML attribute. It indicates whether the control is disabled. If it is disabled, it does not accept clicks. So it’s literally unavailable, bestie.

Example:

<label>
    Allow drinks?
    <input id="allow-drinks" type="checkbox" />
</label>

<label for="drink-select">Drink selection:</label>
<select id="drink-select" disabled>
    <option value="1">Water</option>
    <option value="2">Beer</option>
    <option value="3">Pepsi</option>
    <option value="4">Whisky</option>
</select>

my $allowDrinksCheckbox = $doc->getElementById( 'allow-drinks' );
my $drinkSelect = $doc->getElementById( 'drink-select' );

$allowDrinksCheckbox->addEventListener( change => sub
{
    if( $event->target->checked )
    {
        $drinkSelect->disabled = 0; # false
    }
    else
    {
        $drinkSelect->disabled = 1; # true
    }
}, { capture => 0});

See also Mozilla documentation <https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/disabled>

🧚 form 🧚

Read-only.

An HTML::Object::DOM::Element::Form referencing the form that this element is associated with. If the element is not associated with a <form> element, then it returns undef. So like, sometimes it’s got a form, sometimes it’s single and ready to mingle.

Example:

<form id="pet-form">
    <label for="pet-select">Choose a pet</label>
    <select name="pets" id="pet-select">
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
        <option value="parrot">Parrot</option>
    </select>

    <button type="submit">Submit</button>
</form>

<label for="lunch-select">Choose your lunch</label>
<select name="lunch" id="lunch-select">
        <option value="salad">Salad</option>
        <option value="sandwich">Sandwich</option>
</select>

my $petSelect = $doc->getElementById( 'pet-select' );
my $petForm = $petSelect->form; # <form id="pet-form">

my $lunchSelect = $doc->getElementById( 'lunch-select' );
my $lunchForm = $lunchSelect->form; # undef

See also Mozilla documentation <https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/form>

🎀 labels 🎀

Read-only.

A HTML::Object::DOM::NodeList of label elements associated with the element. It’s giving “who claims this select” energy.

Example:

<label id="label1" for="test">Label 1</label>
<select id="test">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>
<label id="label2" for="test">Label 2</label>

window->addEventListener( DOMContentLoaded => sub
{
    my $select = $doc->getElementById( 'test' );
    for( my $i = 0; $i < $select->labels->length; $i++ )
    {
        say( $select->labels->[$i]->textContent ); # "Label 1" and "Label 2"
    }
});

See also Mozilla documentation <https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/labels>

📏 length 📏

An unsigned long that reflects the number of option elements in this select element. So it’s literally a count, bestie.

See also Mozilla documentation <https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/length>

🍓 multiple 🍓

A boolean value reflecting the multiple HTML attribute. It indicates whether multiple items can be selected. Yes, you can pick more than one, fr fr.

See also Mozilla documentation <https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/multiple>

🏷️ name 🏷️

A string reflecting the name HTML attribute. It contains the name of this control used by servers and DOM search functions. So it’s the select’s government name.

See also Mozilla documentation <https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/name>

🌈 options 🌈

Read-only.

An OptionsCollection representing the set of option elements contained by this element. It’s the whole option squad, and I’m obsessed.

Example:

<label for="test">Label</label>
<select id="test">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>

window->addEventListener( DOMContentLoaded => sub
{
    my $select = $doc->getElementById( 'test' );
    for( my $i = 0; $i < $select->options->length; $i++ )
    {
        say( $select->options->[$i]->label ); # "Option 1" and "Option 2"
    }
});

See also Mozilla documentation <https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/options>

🔥 required 🔥

A boolean value reflecting the required HTML attribute. It indicates whether the user is required to select a value before submitting the form. So like, you can’t skip this one, bestie.

See also Mozilla documentation <https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/required>

🎯 selectedIndex 🎯

A long reflecting the index of the first selected option element. The value undef indicates no element is selected. So if nothing’s picked, it’s undef, periodt.

Example:

<p id="p">selectedIndex: 0</p>
<select id="select">
    <option selected>Option A</option>
    <option>Option B</option>
    <option>Option C</option>
    <option>Option D</option>
    <option>Option E</option>
</select>

my $selectElem = $doc->getElementById('select');
my $pElem = $doc->getElementById('p');

# When a new <option> is selected
$selectElem->addEventListener( change => sub
{
    my $index = $selectElem->selectedIndex;
    # Add that data to the <p>
    $pElem->innerHTML = 'selectedIndex: ' . $index;
})

See also Mozilla documentation <https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedIndex>

💖 selectedOptions 💖

Read-only.

An Collection representing the set of option elements that are selected. Yes, “An Collection” — we’re keeping the original grammar chaos, bestie.

📐 size 📐

A long reflecting the size HTML attribute. It contains the number of visible items in the control. The default is 1, unless multiple is true, in which case it is 4. So default is 1, but if multiple is true, it’s 4. Got it.

See also Mozilla documentation <https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/size>

🦋 type 🦋

Read-only.

A string representing the form control’s type. When multiple is true, it returns select-multiple; otherwise, it returns select-one. So it’s either select-multiple or select-one, no in-between.

See also Mozilla documentation <https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/type>

😭 validationMessage 😭

Read-only.

A string representing a localized message that describes the validation constraints that the control does not satisfy (if any). This attribute is the empty string if the control is not a candidate for constraint validation (willValidate is false), or it satisfies its constraints. So if there’s no problem, it’s empty. If there is a problem, it tells you about it.

💜 validity 💜

Read-only.

A ValidityState object reflecting the validity state that this control is in. It’s the vibe check for validity.

See also Mozilla documentation <https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/validity>

⭐ value ⭐

A string reflecting the value of the form control. Returns the value property of the first selected option element if there is one, otherwise the empty string. So first selected option’s value, or empty string. Periodt.

See also Mozilla documentation <https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/value>

👑 willValidate 👑

Read-only.

A boolean value that indicates whether the button is a candidate for constraint validation. Yes, button — that’s what the original says, bestie, we’re not fixing it. It is false if any conditions bar it from constraint validation.

See also Mozilla documentation <https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/willValidate>

🛠️ METHODS 🛠️

Inherits methods from its parent HTML::Object::DOM::Element. Periodt 💅

🎀 `add` 🎀

Okay so bestie, you pass in an item, and optionally a position offset before that tells it where to insert the item, and this adds an element to the collection of option elements for this select element. Iconic.

item — an Option element or OptGroup element.
before — optional, and it’s an element of the collection, or an index of type long, representing the item should be inserted before. If this parameter is undef (or the index does not exist), the new element is appended to the end of the collection.

Example:

my $sel = $doc->createElement( 'select' );
my $opt1 = $doc->createElement( 'option' );
my $opt2 = $doc->createElement( 'option' );

$opt1->value = 1;
$opt1->text = "Option: Value 1";

$opt2->value = 2;
$opt2->text = "Option: Value 2";

# No second argument; no 'before' argument
$sel->add( $opt1, undef );
# Equivalent to above
$sel->add( $opt2 );

Produces the following, conceptually:

<select>
    <option value="1">Option: Value 1</option>
    <option value="2">Option: Value 2</option>
</select>

See also Mozilla documentation: https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/add

💨 `blur` 💨

Under perl, of course, this does nothing. 😭

Under JavaScript, this removes the input focus from this element. This method is now implemented on HTML::Object::DOM::Element.

See also Mozilla documentation: https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/blur

✅ `checkValidity` ✅

Checks whether the element has any constraints and whether it satisfies them. If the element fails its constraints, the browser fires a cancelable invalid event at the element (and returns false).

✨ `focus` ✨

Under perl, of course, this does nothing. 😭

Under JavaScript, this gives input focus to this element. This method is now implemented on HTML::Object::DOM::Element.

See also Mozilla documentation: https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/focus

🔢 `item` 🔢

Gets an item from the options collection for this select element by providing a zero-based index position. The way that zero-based indexing ate, fr fr.

Example:

<select id="myFormControl">
    <option id="o1">Opt 1</option>
    <option id="o2">Opt 2</option>
</select>

# Returns the OptionElement representing #o2
my $sel = $doc->getElementById( 'myFormControl' );
my $elem1 = $sel->item(1); # Opt 2

See also Mozilla documentation: https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/item

🏷️ `namedItem` 🏷️

Gets the item in the options collection with the specified name. The name string can match either the id or the name attribute of an option node.

Example:

<select id="myFormControl">
    <option id="o1">Opt 1</option>
    <option id="o2">Opt 2</option>
</select>

my $elem1 = $doc->getElementById( 'myFormControl' )->namedItem( 'o1' ); # Returns the OptionElement representing #o1

This is, in effect, a shortcut for "$select-"options->namedItem>.

See also Mozilla documentation: https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/namedItem

🗑️ `remove` 🗑️

Removes the element at the specified index (zero-based) from the options collection for this select element and return it. Bye-bye, option 💅

Example:

<select id="existingList" name="existingList">
    <option value="1">Option: Value 1</option>
    <option value="2">Option: Value 2</option>
    <option value="3">Option: Value 3</option>
</select>

my $sel = $doc->getElementById( 'existingList' );
my $removed = $sel->remove(1);

HTML is now:

<select id="existingList" name="existingList">
    <option value="1">Option: Value 1</option>
    <option value="3">Option: Value 3</option>
</select>

See also Mozilla documentation: https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/remove

📣 `reportValidity` 📣

This method reports the problems with the constraints on the element, if any, to the user. If there are problems, it fires a cancelable invalid event at the element, and returns false; if there are no problems, it returns true.

🛠️ `setCustomValidity` 🛠️

Sets the custom validity message for the selection element to the specified message. Use the empty string to indicate that the element does not have a custom validity error.

🎉 EVENTS 🎉

Event listeners for those events can also be found by prepending "on" before the event type:

"click" event listeners can be set also with "onclick" method:

$e->onclick(sub{ # do something });
# or as an lvalue method
$e->onclick = sub{ # do something };

Note that, under perl, almost no event are fired, but you can trigger them yourself.

🔄 `change` 🔄

Fires when the user selects an option, but since there is no user interaction, this event is fired when the "selectedIndex" value changes, which you can change yourself.

Example:

<label>Choose an ice cream flavor:
    <select class="ice-cream" name="ice-cream">
        <option value="">Select One …</option>
        <option value="chocolate">Chocolate</option>
        <option value="sardine">Sardine</option>
        <option value="vanilla">Vanilla</option>
    </select>
</label>

<div class="result"></div>

my $selectElement = $doc->querySelector('.ice-cream');

$selectElement->addEventListener( change => sub
{
    my $result = $doc->querySelector( '.$result' );
    $result->textContent = "You like " . $event->target->value;
});

See also Mozilla documentation: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event

⌨️ `input` ⌨️

Fires when the value of an <input>, <select>, or <textarea> element has been changed.

See also Mozilla documentation: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event

🧼 `reset` 🧼

Reset the cache flag so that some data will be recomputed. The cache is design to avoid doing useless computing repeatedly when there is no change of data.

💌 AUTHOR 💌

Jacques Deguest <jack@deguest.jp> 💖

🔗 SEE ALSO 🔗

Mozilla documentation: https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement
Mozilla documentation on select element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select

📜 COPYRIGHT & LICENSE 📜

This program is free software; you can redistribute it and/or modify it under the same terms as Perl itself.

✨ That’s the whole vibe for HTML::O...:Select(3) — source/version: perl v5.42.2; date: 2026-02-15. Mwah, bestie! 💖🎀

📦 where this page comes from

alpine 3.24: perl-html-object-doc 0.6.0-r1 · GPL-1.0-or-later OR Artistic-1.0-Perl
💖 girlified by deepseek-ai/DeepSeek-V4.1-Flash-1017 on 2026-11-04: a language model's rewrite of the original, under its terms

HTML::O...:Select(3)

💅 HTML::Object::DOM::Element::Select(3) — User Contributed Perl Documentation ✨

🌸 NAME 🌸

🎀 SYNOPSIS 🎀

⭐ VERSION ⭐

🦋 DESCRIPTION 🦋

👑 INHERITANCE 👑

✨ PROPERTIES ✨

🌟 autofocus 🌟

💀 disabled 💀

🧚 form 🧚

🎀 labels 🎀

📏 length 📏

🍓 multiple 🍓

🏷️ name 🏷️

🌈 options 🌈

🔥 required 🔥

🎯 selectedIndex 🎯

💖 selectedOptions 💖

📐 size 📐

🦋 type 🦋

😭 validationMessage 😭

💜 validity 💜

⭐ value ⭐

👑 willValidate 👑

🛠️ METHODS 🛠️

🎀 add 🎀

💨 blur 💨

✅ checkValidity ✅

✨ focus ✨

🔢 item 🔢

🏷️ namedItem 🏷️

🗑️ remove 🗑️

📣 reportValidity 📣

🛠️ setCustomValidity 🛠️

🎉 EVENTS 🎉

🔄 change 🔄

⌨️ input ⌨️

🧼 reset 🧼

💌 AUTHOR 💌

🔗 SEE ALSO 🔗

📜 COPYRIGHT & LICENSE 📜

🎀 `add` 🎀

💨 `blur` 💨

✅ `checkValidity` ✅

✨ `focus` ✨

🔢 `item` 🔢

🏷️ `namedItem` 🏷️

🗑️ `remove` 🗑️

📣 `reportValidity` 📣

🛠️ `setCustomValidity` 🛠️

🔄 `change` 🔄

⌨️ `input` ⌨️

🧼 `reset` 🧼