Reputation: 3
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
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
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