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>

Answer 1

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