CODEWITHSUNDEEP
javascriptformsconditional-statementsdropdown
Alex Dolgodushev
Alex Dolgodushev

Reputation: 3

Show\hide select field options base on text field value

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>

Upvotes: 0

Views: 267

Answers (2)

Get Off My Lawn
Get Off My Lawn

Reputation: 36351

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>

Upvotes: 1

Tyrin Shupp
Tyrin Shupp

Reputation: 16

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());
})

Upvotes: 0

Related Questions