Question 312524 in Html Question posted in
Some basic documentation can be found here.

Html – Custom option in select including inputs

I want a specific usage on my website.
I made a simple select for now but I would like as last option item to include inputs so the user can enter a range.
Something like that :

<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>

But it for sure doesn’t work. Anyone has any idea how to do this properly ? Or maybe a different approach ?

Tags:

2

Answers


  1. 0

    You can try it https://codepen.io/Jonathan-Rodrigues-Cardoso/pen/WNmQKGo

    <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()">select</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]}`);
    //do something with range. like send to server
  };
</script>

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

    You will have something like

    sample

    Login or Signup to reply.
  2. 0

    You will have to customize the entire selection then if you want to add input fields to select, rather than this, you should consider adding a option of ‘Custom’ and after the person clicks on that, you should display input field, it is much more efficient then customizing the entire select.

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search