Show\hide select field options base on text field value

Question

I'm creating the online form and in the form, I have one text (number) field and one dropdown list with several options. I need to show some of these options when value fo the text field is below zero and other options when the value of the text field is greater than 0.

Is someone have any idea how to do it using JS? (no database in the backend).

Thanks for any help!

I can use only js (jquery) + css for this task.

Example:

<form id="test" name="test" target="_self">
    <input id="text" name="text field" type="text">
    <select id="list" name="list" size="1">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
</form>

Just beware that [Safari won't let you show/hide options](https://stackoverflow.com/questions/56429251/why-hide-show-event-is-not-working-in-safari), you have to remove them and add them back. — T.J. Crowder, Jun 03 '19 at 15:28

Get Off My Lawn · Answer 1 · 2019-06-03T16:38:36.717

Using vanilla javascript, you can use a template along with data-* and rebuild the select box to show certain values by testing the data-* value against the input value.

const input = document.querySelector('#text')
const select = document.querySelector('#list')
const template = document.querySelector('template')

input.addEventListener('input', e => {
  let val = parseInt(e.target.value)
  // Clone the template
  let t = document.importNode(template.content, true)
  // Create a fragment for the new list
  let f = document.createDocumentFragment()
  
  for (var i = 0; i < t.children.length; i++) {
    let child = t.children[i]
    
    let show = parseInt(child.getAttribute('data-show') || '0')
    // If the data-show is larger than zero and in the input is larger than zero
    // Clone the current option and place it in the fragment
    if(show > 0 && val > 0) f.appendChild(child.cloneNode(true))
    
    // If the data-show is smaller than zero and in the input is smaller than zero
    // Clone the current option and place it in the fragment
    if(show < 0 && val < 0) f.appendChild(child.cloneNode(true))
  }
  
  // If the fragment doesn't have any options display a message
  if (f.children.length == 0) {
    let option = document.createElement('option')
    option.textContent = 'Enter a number in the text field'
    f.appendChild(option)
  }
  
  // Set the value of the select
  select.innerHTML = ''
  select.appendChild(f)
})

<form id="test" name="test" target="_self">
  <input id="text" name="text field" type="text">
  <select id="list" name="list" size="1">
    <option>Enter a number in the text field</option>
  </select>
</form>

<template>
  <option data-show="-1" value="1">1</option>
  <option data-show="-1" value="2">2</option>
  <option data-show="1" value="3">3</option>
  <option data-show="1" value="4">4</option>
  <!-- This value should never show since it is set to zero -->
  <option data-show="0" value="5">5</option>
  <!-- This value should never show since it doesn't have a data-show attribute -->
  <option value="6">6</option>
</template>

Thanks for answer! Need to test it to understand how it works) — Alex Dolgodushev, Jun 04 '19 at 17:44

score 0 · Accepted Answer · answered Jun 03 '19 at 15:56

You may want to give your options id's then because using values as identifiers can be problematic. Also recommend using a listener for the input into the text field, here is an example given i gave the options an id of "option1":

$('#text').on('input', function(){
  if($('#text').val() > 0){
    $('#option1').show();
  }
  else($('#option1').hide());
})

Show\hide select field options base on text field value

2 Answers2