Select menu with personalized choices

Question

Select menu with personalized choices

I am in need of a specific feature for my website. Currently, I have implemented a basic select element but I want to add the option for users to input a range as the last item. Here is an example of what I'm trying to achieve:

<select>
  <option>0-9</option>
  <option>10-19</option>
  <option>20-29</option>
  <option>
    <input type="number" name="min" min="0" max="30"/>
    <input type="number" name="max" min="0" max="30"/>
  </option>
</select>

Unfortunately, this setup does not work as intended. Does anyone have any suggestions on how to properly implement this feature? Perhaps there is a different approach that would work better?

javascript html css forms

Answer 1

Answer №1

Feel free to give it a go at this link

<div id="container">
  <select id="select-range" onchange="onChangeSelect(this)">
    <option>0-9</option>
    <option>10-19</option>
    <option>20-29</option>
    <option>custom</option>
  </select>

  <div>
    <input id="input-from" type="number" name="min" min="0" max="30" disabled />
    -
    <input id="input-to" type="number" name="max" min="0" max="30" disabled />
  </div>

  <button onclick="onSelect()">choose</button>
</div>

<script>
  const onChangeSelect = (event) => {
    if (event.value === "custom") {
      document.getElementById("input-to").disabled = false;
      document.getElementById("input-from").disabled = false;
    } else {
      document.getElementById("input-to").disabled = true;
      document.getElementById("input-from").disabled = true;
    }
  };

  const onSelect = () => {
    const selectRange = document.getElementById("select-range").value;
    let range = [];

    if (selectRange === "custom") {
      const inputTo = document.getElementById("input-to").value;
      const inputFrom = document.getElementById("input-from").value;
      range[0] = inputFrom;
      range[1] = inputTo;
    } else {
      range = selectRange.split("-");
    }

    alert(`range: ${range[0]} - ${range[1]}`);
    //perform action with range, such as sending it to the server
  };
</script>

<style>
  #container {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 10px;
  }
</style>

You'll end up with something along these lines

Answer 2

Feel free to give it a go at this link

<div id="container">
  <select id="select-range" onchange="onChangeSelect(this)">
    <option>0-9</option>
    <option>10-19</option>
    <option>20-29</option>
    <option>custom</option>
  </select>

  <div>
    <input id="input-from" type="number" name="min" min="0" max="30" disabled />
    -
    <input id="input-to" type="number" name="max" min="0" max="30" disabled />
  </div>

  <button onclick="onSelect()">choose</button>
</div>

<script>
  const onChangeSelect = (event) => {
    if (event.value === "custom") {
      document.getElementById("input-to").disabled = false;
      document.getElementById("input-from").disabled = false;
    } else {
      document.getElementById("input-to").disabled = true;
      document.getElementById("input-from").disabled = true;
    }
  };

  const onSelect = () => {
    const selectRange = document.getElementById("select-range").value;
    let range = [];

    if (selectRange === "custom") {
      const inputTo = document.getElementById("input-to").value;
      const inputFrom = document.getElementById("input-from").value;
      range[0] = inputFrom;
      range[1] = inputTo;
    } else {
      range = selectRange.split("-");
    }

    alert(`range: ${range[0]} - ${range[1]}`);
    //perform action with range, such as sending it to the server
  };
</script>

<style>
  #container {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 10px;
  }
</style>

You'll end up with something along these lines

Answer 3

Answer №2

If you're looking to enhance the selection process by including input fields, it's recommended to opt for a more efficient approach. Instead of customizing the entire selection, consider adding an option labeled 'Custom'. Upon selecting this option, display the input field for a streamlined experience.

function showInput(){
const rangeSelector = document.getElementById("range-selector")
const customRangeInput = document.getElementById("custom-range-input")
if (rangeSelector.value=="Custom Range"){
customRangeInput.style.display = "block"
}
else{
customRangeInput.style.display = "none"
}

}

<select id="range-selector" onclick="showInput()">
  <option>0-9</option>
  <option>10-19</option>
  <option>20-29</option>
  <option >
    Custom Range
  </option>
</select>
<div id="custom-range-input" hidden>
    <input type="number" name="min" min="0" max="30"/>
    <span>-</span>
    <input type="number" name="max" min="0" max="30"/>
</div>
</div>

Answer 4

If you're looking to enhance the selection process by including input fields, it's recommended to opt for a more efficient approach. Instead of customizing the entire selection, consider adding an option labeled 'Custom'. Upon selecting this option, display the input field for a streamlined experience.

function showInput(){
const rangeSelector = document.getElementById("range-selector")
const customRangeInput = document.getElementById("custom-range-input")
if (rangeSelector.value=="Custom Range"){
customRangeInput.style.display = "block"
}
else{
customRangeInput.style.display = "none"
}

}

<select id="range-selector" onclick="showInput()">
  <option>0-9</option>
  <option>10-19</option>
  <option>20-29</option>
  <option >
    Custom Range
  </option>
</select>
<div id="custom-range-input" hidden>
    <input type="number" name="min" min="0" max="30"/>
    <span>-</span>
    <input type="number" name="max" min="0" max="30"/>
</div>
</div>

Select menu with personalized choices

Answer №1

Answer №2

Similar questions

Explore the category options in the reference document using Node.js

abandoning the upload of an item into a THREE.js environment

Most efficient method for revealing all concealed divs using JavaScript

A step-by-step guide on storing JSON data into a variable using NodeJS

Retrieve unique elements from an array obtained from a web API using angular brackets

Managing various iterations of identical repositories

Mobile Image Sizing with Bootstrap 4 Cards

Is utilizing React function components the most effective solution for this problem?

Encountering a Vercel deployment failure due to a TypeError: The 'split' property cannot be read from undefined within several objects

Encountering a Node V18 Peer Dependency Conflict错

Utilizing JavaScript to eliminate objects from a collection and showcase a refreshed arrangement

Gorgeous stew, precise match when using the "findAll()" function

Next.js application deployment halted due to an unsuccessful completion of the process with the command "/bin/bash -ol pipefail -c npm ci"

What accounts for the different behavior of line-height when using units vs percentage or em in this instance?

What initiates the call for CSS?

Styling a half circle in React Native

IE causing Ul LI Menu to not display as Block

Applying a CSS class (or style) dynamically depending on the variable with the help of a directive

Developing an npm console application that is "installable" similar to tools like yeoman, gulp, or grunt

Developing play and pause capabilities using JavaScript for the existing audio player