how to create a dropdown passengers count form?

Question

Can someone help me out here on how to add passengers count dropdown form like on the image below. i have been searching all over but cannot seem to find any demo or help.

thanks for your help

Answer 1

This is a solution using pure HTML, CSS, and jQuery. For a Bootstrap-specific answer, How use input field as toggle for bootstrap 4 dropdown may help.

Moving on.

You should create a normal number type form and add a disabled attribute in the input tag so that no cursor appears when you click the form (<input type="number" disabled>). Then, just create a dropdown menu (probably a <div> with an absolute position right under the input) with a classname of your choice (assuming in this answer that you choose .passengerInput as the classname).

You can hide the dropdown by default using the $(".passengerInputDropdown").hide() method in the body of your JS.

Then, when you click the form, using the $(".passengerInput").toggle() method, do something to the effect of:

$(".passengerInput").on("click", () => {
    $(".passengerInputDropdown").toggle();
})

Let me know if this helps!