Using a Dropdown List to Populate a Text Box in Oracle APEX
In Oracle APEX, dropdown lists (select lists) are often used to control other form elements dynamically. A common requirement is to populate a text box with a value based on the selection made in a dropdown. This can be achieved using dynamic actions or JavaScript.
Basic Steps to Populate a Text Box from a Dropdown List
Create a Select List (Dropdown)
Open APEX and navigate to the desired page.
Click Create > Item > Select List.
Name it something meaningful, such as P1_CATEGORY.
Define its List of Values (LOV), using either Static Values or a SQL Query.
Create a Text Box
Add a new Text Field item.
Name it P1_DESCRIPTION.
This field will be populated automatically based on the dropdown selection.
Use Dynamic Actions to Populate the Text Box
Create a Dynamic Action on P1_CATEGORY.
Set Event to Change (so it triggers when the dropdown value changes).
Choose Action as Set Value.
In Set Type, select SQL Statement and enter a query like:
SELECT description FROM product_categories WHERE category_id = :P1_CATEGORY;
Set Affected Elements to P1_DESCRIPTION (this is the text field being updated).
Enable Fire on Page Load if you want the value to be set when the page loads.
Using JavaScript to Populate the Text Box Dynamically
Instead of a dynamic action, JavaScript can also be used to achieve this.
Open the Attributes section of the dropdown (P1_CATEGORY).
In the Advanced section, set a Static ID like category_list.
Go to the Page JavaScript section and add the following script:
$("#category_list").change(function() {
let selectedValue = $(this).val();
apex.server.process(
"GET_CATEGORY_DESCRIPTION",
{ x01: selectedValue },
{
success: function(data) {
$s("P1_DESCRIPTION", data);
}
}
);
});
Create an On-Demand AJAX Process in APEX named GET_CATEGORY_DESCRIPTION with this PL/SQL code:
DECLARE
v_description VARCHAR2(4000);
BEGIN
SELECT description INTO v_description
FROM product_categories
WHERE category_id = apex_application.g_x01;
sys.htp.p(v_description);
END;
This method uses AJAX to fetch the corresponding text value from the database when the dropdown selection changes.
Using a Static List for Simple Dropdowns
For small dropdowns with static values, an alternative method is using JavaScript directly without an AJAX call.
In the List of Values, use static values like:
Electronics | 1
Furniture | 2
Clothing | 3
Add the following JavaScript code to manually set the text box value:
$("#category_list").change(function() {
let descriptions = {
"1": "Devices like phones and laptops",
"2": "Tables, chairs, and cabinets",
"3": "Shirts, pants, and shoes"
};
let selectedValue = $(this).val();
$s("P1_DESCRIPTION", descriptions[selectedValue] || "");
});
This approach is useful when the text box values do not need to be retrieved from the database.
Best Use Cases for This Approach
Product Selection Forms: Users select a product category, and a description field is auto-filled.
User Registration: Selecting a country populates a text box with a country code.
Order Management: Choosing a customer from a dropdown fills in their address automatically.
Using a dropdown list to populate a text box in APEX can be done using Dynamic Actions, JavaScript, or AJAX Calls. Each method has its benefits depending on the use case. Dynamic Actions are simple and work well for direct SQL queries. JavaScript provides more flexibility for client-side interactions. AJAX is useful for retrieving data dynamically without page refreshes.
EXAMPLE:
The following example allows a display list of Countries to display a selected value inside a text box.
The first part of the code handles the displaying of the data in the textbox and the second part shows how
To insert the values into the session.
In a page, create a region.
Add a “Select One” Item, from “Items”, to the Region.
In the Page Item section, in the Identification Area, change type to “Select List”
In the Page Item section , List of Values section, select a method to populate the list
Shared component
SQL Query
Static Value
Function Body returning SQL Query
In this case, a Shared Component LOV of Countries
Turn “OFF” Display NULL Values if needed.
Create a “Dynamic Action” for the list control
Set “True” part of the DA, in the Action section, changes the name of the action and set it to “Execute JavaScript Code”
Use the following Code:
var DisplayValueVar =$("#P53_LIST option:selected").text();
console.log(DisplayValueVar);
apex.item('P53_TEXT').setValue(DisplayValueVar);
Create an Additional “True” DA for saving the data into the Session
Set “Action” to “Execute JavaScript Code”
In the settings add the following code
APEX_UTIL.SET_SESSION_STATE('P53_TEXT',v('P53_TEXT));
