Change Dropdown values based on input in textfield

问题

I try to find a solution, but I can't find it and I am not able to program it by myself. I hope you can help me.

I have 2 elements: A textfield and a drop down menu (select/options).

Based on the birth/year of a person I enter into the textfield, I want to have a related drop down values.

If the person is 0-17 years old, the values in the drop down should bei 0, 100, 200, 300, 400, 500, 600. If the person is 18 years old or older, the values in the drop down should bei 300, 500, 1000, 1500, 2000, 2500.

Example: If I enter 1978 into the text field, the drop down menu should show the values 300, 500,… If I enter 2002 into the text field, the drop down menu should show the values 100, 200,…

I hope it is understandable what I am looking for.

I have checked this one: Change dropdown value based on Text Input

and also this one, which looks also similar to what I need: jQuery - Change hidden value based on input field

But I can't make it.

A jsfiddle would be really cool!

Thank you in advance.

 <input name="Year" type="text" value="" />

 <select name="Results">
 <option selected="selected" value="">please choose:</option>
 <option value="300">300.-</option>
 <option value="500">500.-</option>
 <option value="1000">1000.-</option>
 <option value="1500">1500.-</option>
 <option value="2000">2000.-</option>
 <option value="2500">2500.-</option>
 </select>

 <select name="Results">
 <option selected="selected" value="">please choose:</option>
 <option value="100">100.-</option>
 <option value="200">200.-</option>
 <option value="300">300.-</option>
 <option value="400">400.-</option>
 <option value="500">500.-</option>
 <option value="600“>600.-</option>
 </select>

Kind regards, Andy

回答1:

You could handle this by taking advantage of data-* attributes and using jQuery to determine which values should be shown based on your selection :

<!-- Assumes a valid year is entered -->
<input name="Year" type="text" value="" />

<!-- Notice your possible values data options -->
<select name="Results">
   <option selected="selected" value="">please choose:</option>
   <option value="300" data-under-18="100" data-over-18="300">300.-</option>
   <option value="500" data-under-18="200" data-over-18="500">500.-</option>
   <option value="1000" data-under-18="300" data-over-18="1000">1000.-</option>
   <option value="1500" data-under-18="400" data-over-18="1500">1500.-</option>
   <option value="2000" data-under-18="500" data-over-18="2000">2000.-</option>
   <option value="2500" data-under-18="600" data-over-18="2500">2500.-</option>
 </select>
  <script>
    $(function(){
        // When your year changes...
        $('[name="Year"]').change(function(){
            // Check that the value is a year (assumes 4 digit number)
            if(/^\d{4}/.test($(this).val())){
                // Parse the value
                var year = parseInt($(this).val());
                // Determine the user's age
                var age =  new Date().getFullYear() - year;
                // Use the data attributes to set each value (ignore the first one)
                $('[name="Results"] option:not(:first)').each(function(){
                    var valueToUse = (age >= 18) ? $(this).attr('data-over-18') : $(this).attr('data-under-18');
                    $(this).val(valueToUse).text(valueToUse);
                });
            }                
            else{
              alert('Please enter a year! (any 4-digit number will do)');
              $(this).val('').focus();
            }
        })
    })
  </script>

You can see a complete working example here and demonstrated below :

回答2:

https://jsfiddle.net/erjc0fna/

Basically each option has a class that identifies it as lessThan18 or over18. The ones without classes are available for either case according to what you wrote. On keyup for the textbox it then calculates the age and hides/shows the correct options.

回答3:

Include jquery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

After add ids to the input(inputId) and the 2 select(select1 and select2)

   <input id="inputId" name="Year" type="text" value="" />

 <select id="select1" name="Results">
 <option selected="selected" value="">please choose:</option>
 <option value="300">300.-</option>
 <option value="500">500.-</option>
 <option value="1000">1000.-</option>
 <option value="1500">1500.-</option>
 <option value="2000">2000.-</option>
 <option value="2500">2500.-</option>
 </select>

 <select id="select2" name="Results">
 <option selected="selected" value="">please choose:</option>
 <option value="100">100.-</option>
 <option value="200">200.-</option>
 <option value="300">300.-</option>
 <option value="400">400.-</option>
 <option value="500">500.-</option>
 <option value="600“>600.-</option>
 </select>

Code jquery

<script>
//here the code
$( document ).ready(function() {

    $("#inputId").keypress(function(e) 
    {
        if(e.which == 13) //When you press enter key one select is hide an the other is show
        {
            var aux =  parseInt($(this).val());
            if( aux >= 1999)
            {
                $("#select2").show();
                $("#select1").hide();
            }
            else
            {
                $("#select1").show();
                $("#select2").hide();
            }
        }
    });
});
<script>

来源：https://stackoverflow.com/questions/36850805/change-dropdown-values-based-on-input-in-textfield