Ctrl K

Theme Components Ajax Events Functions Template Get-Started

Select

To enable the custom select component using the form="select" attribute, follow the provided example:

<div form="select">
  <!-- Options go here -->
  <o value="option1" selected>Option 1</o>
  <o value="option2">Option 2</o>
  <!-- Add more options as needed -->
</div>

In this example, the <div> element has the attribute form="select", indicating that it should be treated as a custom select component. Inside the <div>, <o> (option) elements are used to define selectable options. Each option can have a value attribute to represent its value.

Feel free to customize the options and their attributes based on your specific use case. The form="select" attribute triggers the custom styling and behavior associated with the custom select component.

To use the custom select component with the selectType="left-icon" attribute, you can follow the example below:

<datalist name="Animal">
  <data value="dog"><img src="dog.png"></data>
  <data value="cat"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M7 2C4.2233691 2 2 4.2233691 2 7C2 9.0633125 3.229833 10.816997 5 11.583984L5 22L7 22L7 16C7 16 7.7262856 15.357163 9 15.105469L9 22L11 22L11 15.144531C12.064862 15.420104 13 16 13 16L13 22L15 22L15 16L17 16L17 22L19 22L19 13.917969C18.674 13.968969 18.341 14 18 14C14.692 14 12 11.533 12 8.5L12 7L10 7C7.3867614 7 6.1127578 8.4737779 5.5078125 9.6328125C4.5850311 9.1433862 4 8.1968408 4 7C4 5.2426309 5.2426309 4 7 4L7 2 z M 14 3.5L14 8.5C14 10.4 15.8 12 18 12C20.2 12 22 10.4 22 8.5L22 3.5L20 5.4003906C19.4 5.1003906 18.7 5 18 5C17.3 5 16.6 5.1003906 16 5.4003906L14 3.5 z M 16 7C16.6 7 17 7.4 17 8C17 8.6 16.6 9 16 9C15.4 9 15 8.6 15 8C15 7.4 15.4 7 16 7 z M 20 7C20.6 7 21 7.4 21 8C21 8.6 20.6 9 20 9C19.4 9 19 8.6 19 8C19 7.4 19.4 7 20 7 z" />
</svg></data>
<data value="elephant">🐘</data>
</datalist>

<div name="Animal" selectType="left-icon" required search-holder="check" form="select" placeholder="Select pets" search>
  <o value="dog" selected>Dog</o>
  <o value="cat">Cat</o>
  <o value="elephant">Elephant</o>
</div>

In this example:

The datalist contains data values with associated images.
The <div> element has the attribute form="select" to enable the custom select component.
selectType="left-icon" is used to enable left-aligned icons.
The required attribute indicates that the selection is mandatory.
search-holder="check" specifies the search placeholder text.
The search attribute enables the search functionality.
<o> (option) elements represent selectable options with associated values and text content.

Feel free to customize the values, text, and images based on your requirements. The selectType="left-icon" attribute will style the options with left-aligned icons.

Custom Select Attributes:

Options Width:
- Attribute: options-width
- Description: Set the width of the select select.
- Example: <div form="select" options-width="300px">
Scrollbar Hide:
- Attribute: scrollbar-hide
- Description: Hide the scrollbar in the select.
- Example: <div form="select" scrollbar-hide>
Search:
- Attribute: search
- Description: Enable searching/filtering options.
- Example: <div form="select" search>
Filter:
- Attribute: filter
- Description: Enable option filtering.
- Example: <div form="select" filter>
Multiple Selection:
- Attribute: multiple
- Description: Allow multiple selection.
- Example: <div form="select" multiple>
Size (Multiple Selection):
- Attribute: size
- Description: Specify the number of visible options when multiple selection is enabled.
- Example: <div form="select" multiple size="6">
Disabled:
- Attribute: disabled
- Description: Disable the select select.
- Example: <div form="select" disabled>
Required:
- Attribute: required
- Description: Mark the select as required.
- Example: <div form="select" required>
Placeholder:
- Attribute: placeholder
- Description: Provide a placeholder text.
- Example: <div form="select" placeholder="Select an option">
Search Holder:
- Attribute: search-holder
- Description: Customize the search placeholder.
- Example: <div form="select" search-holder="Search...">
Select Type:
- Attribute: selectType
- Description: Use the value left-icon to enable left-aligned icons.
- Example: <div form="select" selectType="left-icon">

These attributes provide flexibility in customizing the appearance and functionality of your custom select element.

Example Usage

<div options-width="300px" scrollbar-hide filter multiple size="6" disabled required placeholder="Select an option" search-holder="Type to search">
    <option value="dog" selected>Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <!-- Add more options as needed -->
</select>

`$select` Method:

The $select method is a versatile utility for creating and manipulating custom select elements in HTML. It provides a set of properties and methods that allow developers to easily enhance the functionality of standard <div> elements.

<div  class="custom-select"   required  search-holder="check"     form="select"      placeholder="select pets"  search >
      <o value="dog" selected>Dog</o>
       <o value="cat">Cat</o>

  </div>

Example Usage:

// Creating a new $select instance
const mySelect = $select(document.querySelector('.custom-select'));

`$select` Properties:

loadend Property:
- Type: Method
- Description: Executes a provided function once the $select has completed loading.
- Parameters:
- caller (Type: function, Default: function(){}): The function to be called when loading is complete.

Example:

   mySelect.loadend(function(caller){
       // Your code to be executed after loading
   });

change Property:
- Type: Method
- Description: Executes a provided function when the value of the $select changes.
- Parameters:
- caller (Type: function, Default: function(){}): The function to be called on value change.

Example:

   mySelect.change(function(caller){
       // Your code to be executed on value change
   });

value Property:
- Type: Getter/Accessor
- Description: Gets the selected value(s) of the $select. If in multiple mode, returns a comma-separated string of values.
- Returns: string or undefined (if not selected)

Example:

   var selectedValue = mySelect.value;

disabled Property:
- Type: Getter/Setter
- Description: Gets or sets the disabled state of the $select.
- Returns: boolean (true if disabled, false if not)

Example:

   mySelect.disabled = true; // Set disabled
   var isDisabled = mySelect.disabled; // Get disabled state

cntload Property:
- Type: Method
- Description: Executes a provided function during content loading.
- Parameters:
- caller (Type: function, Default: function(){}): The function to be called during content loading.

Example:

  mySelect.cntload(function(event){  //append new optiond  enable loding status in option bar
  event.label(true,"loding>") //show lable in showe bar

  fetch("/products-options.html")
  .then(response => {
    // Check if the request was successful (status code 200)
    if (!response.ok) {
      event.error() ;  //error  show 
      event.label(true,"Opps!!")
    }
    return response.text();
  })
  .then(data => {

    event.clear(data); //append new options
  })
  .catch(error => {
    event.error() ;  //error  show 
    event.label(true,"Opps!!")
  });

});

`event` Object:

The event object is used within the cntload property to handle loading status, errors, and clearing content during loading. It provides several methods for managing the loading process.

label Method:
- Parameters:
- action (Type: boolean, Default: false): Determines whether to show or hide the loading label.
- text (Type: string, Default: null): The text content to be displayed in the loading label.

Description: Displays or hides a loading label with optional custom text.

   event.label(true, "Loading..."); // Show loading label with custom text

error Method:
- Description: Marks an error during loading, typically used to handle fetch errors.

   event.error(); // Trigger error handling

clear Method:
- Parameters:
- appendData (Type: string, Default: ""): The HTML content to be appended after loading.

Description: Clears loading status, appends new content (if provided), and handles additional actions after loading.

   event.clear("<o value='1'>Option 1</o><o value='2'>Option 2</o>");

In the example, event.clear removes loading indicators, appends new options, and executes additional actions after loading.

These methods provide flexibility in managing loading status, errors, and content clearing, allowing you to customize the behavior during the loading process.

html Property:
- Type: Method
- Description: Sets the HTML content of the $select with the provided options HTML.
- Parameters:
- optionsHTML (Type: string): The HTML string representing the options to be set for the $select.
- Returns: undefined

Example:

   mySelect.html("<o value='1'>Option 1</o><o value='2'>Option 2</o>");

add Property:
- Type: Method
- Description: Adds a new option to the $select.
- Parameters:
- value (Type: string): The value of the new option.
- text (Type: string): The text content of the new option.
- Returns: undefined

Example:

   mySelect.add("3", "Option 3");

options Property:
- Type: Method
- Description: A method to iterate over options and execute a provided function.
- Parameters:
- caller (Type: function, Default: function(){}): The function to be called for each option.
- index (Type: string or number, Default: "all"): The index of the option to target or "all" for all options.

Example:

   mySelect.options(function(option, index){
       // Your code to be executed for each option
   }, 2); // Execute for the option at index 2

required Property:
- Type: Getter/Setter
- Description: Gets or sets the required attribute of the $select.
- Returns: boolean (true if required, false if not)

Example:

   mySelect.required = true; // Set required
   var isRequired = mySelect.required; // Get required state

multiple Property:
- Type: Method
- Description: A method to set the $select to multiple mode and optionally set the size.
- Parameters:
- m (Type: boolean, Default: false): Set to true to enable multiple mode.
- size (Type: number, Default: false): If provided, sets the size attribute.
Example:

    mySelect.multiple(true, 3); // Enable multiple mode with a visible size of 3

options_width Property:
- Type: Method
- Description: Sets the width of the options in the $select.
- Parameters:
- width (Type: string): The CSS width value for the options.
Example:

    mySelect.options_width("200px"); // Set options width to 200px

`<o>` Element Attributes:

The <o> element represents an option in a select dropdown. It can have the following attributes:

value Attribute:
- Type: String
- Description: Specifies the value associated with the option. This is the value that will be submitted to the server when the form is submitted.

   <o value="dog">Dog</o>

selected Attribute:
- Type: Boolean
- Description: Indicates that the option should be pre-selected when the page loads.

   <o value="cat" selected>Cat</o>

disabled Attribute:
- Type: Boolean
- Description: Disables the option, making it unselectable and often visually indicating that it's not an available choice.

   <o value="bird" disabled>Bird</o>

`options` Properties:

The options element represents an option within the custom select component. It provides properties that allow you to interact with and customize individual options.

1. `value` Property:

Type: Getter/Accessor
Description: Gets the value of the option.
Returns: string or undefined (if not set)

// Example:
var optionValue = optionsElement.value;

2. `text` Property:

Type: Getter/Accessor
Description: Gets the text content of the option.
Returns: string

// Example:
var optionText = optionsElement.text;

3. `selected` Property:

Type: Getter/Setter
Description: Gets or sets whether the option is selected.
Returns: boolean (true if selected, false if not)

// Example:
var isSelected = optionsElement.selected; // Gets the current selection state

optionsElement.selected = true; // Sets the option as selected

4. `edit` Property:

Type: Method
Description: Edits the option by setting a new value and text.
Parameters:
value (Type: string): The new value for the option.
text (Type: string): The new text content for the option.

// Example:
optionsElement.edit("new-value", "New Option Text");

5. `disabled` Property:

Type: Getter/Setter
Description: Gets or sets whether the option is disabled.
Returns: boolean (true if disabled, false if not)

// Example:
var isDisabled = optionsElement.disabled; // Gets the current disabled state

optionsElement.disabled = true; // Disables the option

Customizing Select Buttons

Customizing a select element allows you to tailor its appearance to match your design needs. Below are some variables you can customize and an example CSS customization:

General Styling

Variable	Description
`--font-size`	Size of the text in the select element.
`--border-color`	Color of the select element border.
`--border-width`	Width of the select element border.
`--background-color`	Background color of the select element.
`--disabled-background`	Background color of the disabled select element.
`--disabled-opacity`	Opacity of the disabled select element.
`--color-primary`	Color of selected option text in the select element.

Example CSS Customization

/* General Styling */
select {
    font-size: var(--font-size);
    border: solid var(--border-width) var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--background-color);
    color: var(--color);
    padding: 8px 12px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

select:disabled {
    background-color: var(--disabled-background);
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
}

Select

Custom Select Attributes:

Example Usage

$select Method:

Example Usage:

$select Properties:

event Object:

<o> Element Attributes:

options Properties:

1. value Property:

2. text Property:

3. selected Property:

4. edit Property:

5. disabled Property:

Customizing Select Buttons

General Styling

Example CSS Customization

`$select` Method:

`$select` Properties:

`event` Object:

`<o>` Element Attributes:

`options` Properties:

1. `value` Property:

2. `text` Property:

3. `selected` Property:

4. `edit` Property:

5. `disabled` Property: