Unable to get selected option from dynamically populated fw-select

In my settings page, I’m adding a fw-select element by dynamically populating the options from the API. I’m creating the element on getConfigs function like this

selectHTML = `<fw-select label="Ticket Type" placeholder="Select Ticket Type" id="ticket_type" >`;
      (option) =>
         (selectHTML += `<fw-select-option value=${option.value}>${option.text}</fw-select-option>`)
selectHTML += `</fw-select>`;

On button click, I’m trying to fetch the selected item like this $("#ticket_type").attr("value") but that returns undefined.

i tried to bind a on change function to the element like this

$("#ticket_type").on("change", function () {
    const val = $(this).val();

Even this did not work,

How can I get the value from my fw-select element?

1 Like

The event names are different. For <fw-select>, you’d want to use the fwChange event. For <fw-button> it is fwClick.

So, you can write something like:

// I haven't tried using this with jQuery
$("#ticket_type").on("fwChange", function (event) {
  let currentValue = event.target.value; // event.target holds reference to the (shadow) DOM element

Or, with vanilla JS:

  .addEventListener("fwChange", function (event) {
    let currentValue = event.target.value;

Here is a full example of this working in action:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Crayons — Options test</title>
      .flex {
        display: flex;
        align-items: center;
      label="House Name"
      placeholder="Your choice"
      state-text="Select singluar option"
      <fw-select-option value="1">Starks</fw-select-option>
      <fw-select-option value="2">Lannisters</fw-select-option>

    <fw-button id="button" color="secondary">Get value</fw-button>

    <div class="flex">
      <p>Value from fw-select:</p>
      <fw-label id="showValue" value=""></fw-label>

      const select = document.querySelector("#select");
      const button = document.querySelector("#button");
      const showValue = document.querySelector("#showValue");

      // Get value on change of select option
      select.addEventListener("fwChange", function (evt) {
        showValue.value = `From select fwChange: ${evt.target.value}`;

      button.addEventListener("fwClick", function (evt) {
        showValue.value = `From button fwClick: ${select.value}`;

Here is how the example looks:



This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.