# Add functional select box

**URL:** <https://forum.wixstudio.com/t/add-functional-select-box/55447>\
**Category:** Ask the community\
**Tags:** wix-members-area, design, question, code\
**Created:** [January 15, 2024, 3:01pm UTC](https://forum.wixstudio.com/t/add-functional-select-box/55447 "2024-01-15T15:01:00Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![tedpenner](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/tedpenner/32/36801_2.png) [@tedpenner](https://forum.wixstudio.com/u/tedpenner)\
**Post date:** [January 15, 2024, 3:01pm UTC](https://forum.wixstudio.com/t/add-functional-select-box/55447/1 "2024-01-15T15:01:00Z")

</div>

We have a page developed at `https://tptxdev.com/carlist` and the delvelper has added a select box to the table. He is trying to do it in the custom code area which requires owner-level permissions.

The issue we are trying to solve is this one:

ISSUE (checkbox) - Make the checkbox functional so that when you click an item, you can then select from a dropdown to complete the get more information form to inquire about that car.

Logic:  
Clicking this selector should cause the checkbox to check  
Selectable choice - “Get more information about this vehicle”  
The message area of the form should populate with  
ID: old\_id number  
year, make, and model information  
range of values formatted with dollar signs and commas for both trade-in value and market value

I was hoping for something that looked a little bit like the one in this example.  
 ![image](https://us1.discourse-cdn.com/wix/original/3X/3/5/35b43c7cca943e20ca39e4f745055276749ea975.png)

Currently, we do appear to be close but are not quite there yet.

My WhatsApp chat link is here

> **[usa2023](https://api.whatsapp.com/message/HIYVIJPD6FMXD1?autoload=1&app_absent=0)**
>
> Business Account

Assistance is greatly appreciated.

Here is the code for the Carlist page

```javascript
import wixData from "wix-data";
import wixWindowFrontend from "wix-window-frontend";
import { proGallery } from "wix-pro-gallery-backend";
import { getGreetings } from "backend/dataFetcher.web.js";

// CARLIST PAGE - https://tptxdev.com/carlist
// WHATSAPP CHAT - https://chat.whatsapp.com/KQeXmIV3IRaDDzJjH8rT0o 

// @author Unknown

let thumbUrl = '';

$w.onReady(function () {
    // ...
    let table = $w('#table1');

    $w("#table1").onCellSelect(async (event) => {
        let cellData = event.cellData;
        thumbUrl = cellData;
        wixData.query("cars/copart")
            .eq("Image_Thumbnail", cellData)
            .find()
            .then((results) => {
                if (results.items.length > 0) {
                    var url = results.items[0].Image_URL;
                    var year = results.items[0].Year;
                    var make = results.items[0].Make;
                    var model = results.items[0].Model_Detail;
                    var trade = results.items[0].CGLow;
                    var market = results.items[0].CGHigh;
                    var urlYearMakeModelTradeMarket = [url, year, make, model, trade, market]
                    displayLightbox(urlYearMakeModelTradeMarket)
                } else {
                    // handle case where no matching items found
                    console.log('Didnt find one');
                }
            })
            .catch((err) => {
                console.log('Didnt find');
                console.log(err);
            });
    });

    // @author Jaay - Search code

    $w("#input1").onInput((event) => {
        let input = $w("#input1");

        let search_query = event.target.value;
        if (input.value === "") {
            console.log("Empty22: ....");
            // $w("#table1").refresh()
        } else {
            wixData
                .query("cars/copart")
                .contains("Make", search_query)
                .or(wixData.query("cars/copart").contains("Model_Detail", search_query))
                .or(wixData.query("cars/copart").contains("Transmission", search_query))
                .or(wixData.query("cars/copart").contains("Fuel_Type", search_query))
                .or(wixData.query("cars/copart").contains("BODY_STYLE", search_query))
                .or(wixData.query("cars/copart").contains("Color", search_query))
                .or(wixData.query("cars/copart").contains("Drive", search_query))
                .find()
                .then((results) => {
                    $w("#table1").rows = results.items;
                    console.log("results are ..", results);
                })
                .catch((error) => {
                    console.error("Error fetching data:", error);
                });
        }
    })

});

// @author Ahsan - Pictures come up in lightbox when the thumbnail is clicked

async function displayLightbox(urlYear) {
    var url = urlYear[0];
    var year = urlYear[1];
    var make = urlYear[2];
    var model = urlYear[3];
    var trade = urlYear[4];
    var market = urlYear[5];
    console.log('Something was clicked!');
    let cellData = url
    console.log(cellData);
    const cellDataHttps = cellData.replace("http://", "https://");
    const fetchedData = await getGreetings(cellDataHttps);
    const contentToPassToLightbox = []
    const imageUrls = [];
    if (fetchedData.lotImages && fetchedData.lotImages.length != 0) {
        fetchedData.lotImages.forEach((item) => {
            if (item.link && item.link.length > 0) {
                imageUrls.push(item.link[0].url);
            }
        });
        var urlYearMakeModelTradeMarket = [imageUrls, year, make, model, trade, market];
        wixWindowFrontend.openLightbox("Carlist Lightbox", urlYearMakeModelTradeMarket);
    } else {
        imageUrls.push('https://' + thumbUrl.toString().slice(0, -7) + 'ful.jpg')
        var urlYearMakeModelTradeMarket = [imageUrls, year, make, model, trade, market];
        wixWindowFrontend.openLightbox("Tim Carlist Lightbox", urlYearMakeModelTradeMarket);
    }
};

```

Here is the code for the head section of the site

```javascript
<script>
  function updateSelect() {
    var selectColumns = document.querySelectorAll("tbody td:nth-child(1)");
    Array.from(selectColumns).forEach(function (selectColumn) {
      var value = selectColumn.innerText;
      if (selectColumn.innerHTML.includes("<style")) {
      }else{
        if (value == "Yes") {
          selectColumn.innerHTML = `
          <style>
      .custom-checkbox {
        display: inline-block;
      }

      .custom-checkbox input {
        display: none;
      }

      .checkmark {
        position: relative;
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 2px solid black;
        background-color: white;
      }

      .custom-checkbox input:checked + .checkmark:after {
        content: "✔️";
        font-size: 16px;
        font-weight: bolder;
        color: black;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      /* Style for the dropdown container */
      .dropdown {
        position: relative;
        display: inline-block;
      }

      /* Style for the dropdown button */
      .dropbtn {
        padding: 10px;
        font-size: 16px;
        border: none;
        cursor: pointer;
      }

      /* Style for the dropdown content */
      .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
        z-index: 1;
      }

      /* Style for the dropdown items */
      .dropdown-content a {
        padding: 12px 16px;
        display: block;
        text-decoration: none;
        color: #333;
      }

      /* Change color on hover */
      .dropdown-content a:hover {
        background-color: #f1f1f1;
      }
    </style>
    <div id="checkDiv" style="display: flex; align-items: center; justify-content: center; margin: 0; margin: auto; padding-top: 30px">
            <div style:"display: block; margin:auto; padding: 28px">
                <label class="custom-checkbox">
                  <input type="checkbox" checked /> <!-- Set 'checked' attribute -->
                  <span class="checkmark"></span>
                </label>

                <div class="dropdown">
                  <button class="dropbtn" onclick="toggleDropdown()">▼</button>

                  <div class="dropdown-content" id="myDropdown">
                    <a href="#">Get more information about this vehicle</a>
                  </div>
                </div>
            </div>
            </div>

 `;
        } else {
          selectColumn.innerHTML = `

          <style>

      .custom-checkbox {
        display: inline-block;
      }

      .custom-checkbox input {
        display: none;
      }

      .checkmark {
        position: relative;
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 2px solid black;
        background-color: white;
      }

      .custom-checkbox input:checked + .checkmark:after {
        content: "✔️";
        font-size: 16px;
        font-weight: bolder;
        color: black;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      /* Style for the dropdown container */
      .dropdown {
        position: relative;
        display: inline-block;
      }

      /* Style for the dropdown button */
      .dropbtn {
        padding: 10px;
        font-size: 16px;
        border: none;
        cursor: pointer;
      }

      /* Style for the dropdown content */
      .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
        z-index: 1;
      }

      /* Style for the dropdown items */
      .dropdown-content a {
        padding: 12px 16px;
        display: block;
        text-decoration: none;
        color: #333;
      }

      /* Change color on hover */
      .dropdown-content a:hover {
        background-color: #f1f1f1;
      }
    </style>

          <div id="checkDiv" style="display: flex; align-items: center; justify-content: center; margin: 0; margin: auto; padding-top: 30px">
            <div style:"display: block; margin:auto; padding: 28px">
      <label class="custom-checkbox">
        <input type="checkbox" />
        <span class="checkmark"></span>
      </label>

      <div class="dropdown">
        <button class="dropbtn" onclick="toggleDropdown()">▼</button>

        <div class="dropdown-content" id="myDropdown">
          <a href="#">Get more information about this vehicle</a>
        </div>
      </div>
      </div>
    </div>
   
            `;
        }
      }
    });
  }
  updateSelect();

  function updateStar() {
    var starColumns = document.querySelectorAll("tbody td:nth-child(2)");
    Array.from(starColumns).forEach(function (starColumn) {
      var value = starColumn.innerText;
      if (starColumn.innerHTML.includes("<img")) {
      } else {
        if (value == "1") {
          starColumn.innerHTML = `<img style="height: 30px; width: 30px; display: block; margin: 0 auto; padding: 20px " src="https://static.wixstatic.com/media/c4ed5a_e0e65c63deef4a769e7c8ce726a27cad~mv2.png" alt="">`;
        } else {
          starColumn.innerHTML = `<img style="height: 30px; width: 30px; display: block; margin: 0 auto; padding: 20px " src="https://static.wixstatic.com/media/c4ed5a_439924e569ba4db49dee51859ec99f9c~mv2.png" alt="">`;
        }
      }
    });
  }
  updateStar();

  // thumbnail
  setInterval(updateImg, 5000);
  function updateImg() {
    var elements = document.querySelectorAll(".ZTH0AF");
    elements.forEach((element) => {
      if (typeof element.innerHTML == "string") {
        var firstCharacters = element.innerHTML.substring(0, 13);
        var imageURL = "https://" + element.innerHTML;
        if (firstCharacters == "cs.copart.com") {
          element.innerHTML =
            "<img style= 'max-height: 50%; max-width: 100%;' src ='" +
            imageURL +
            "'/>";
        }
      }
    });
    updateSelect();
    updateStar();
  }

  var style = document.createElement("style");
  style.innerHTML = `
            thead,
            tbody {
              display: block;
            }
            tbody {
              height: 500px;
              overflow-y: auto; //vertical scroll
              overflow-x: auto; //horizontal scroll
            }
          `;
  document.head.appendChild(style);

      // JavaScript function to toggle the visibility of the dropdown content
      function toggleDropdown() {
      var checkbox = document.querySelector(".custom-checkbox input");
      checkbox.checked = !checkbox.checked;
      var dropdownContent = document.getElementById("myDropdown");
      dropdownContent.style.display =
        dropdownContent.style.display === "block" ? "none" : "block";
    }

    // Close the dropdown if the user clicks outside of it
    window.onclick = function (event) {
      if (!event.target.matches(".dropbtn")) {
        var dropdowns = document.getElementsByClassName("dropdown-content");
        for (var i = 0; i < dropdowns.length; i++) {
          var openDropdown = dropdowns[i];
          if (openDropdown.style.display === "block") {
            openDropdown.style.display = "none";
          }
        }
      }
    };

    document.addEventListener("DOMContentLoaded", function () {

      document.getElementById('checkDiv').addEventListener("click", function () {
        checkbox.checked = !checkbox.checked;
      });

      // Prevent checkbox click event from propagating to the document click event
      document
        .querySelector(".custom-checkbox")
        .addEventListener("click", function (event) {
          event.stopPropagation();
        });
    });

</script>

```