Изменить значения выпадающего списка на основе ввода в текстовом поле

Question

Я пытаюсь найти решение, но я не могу его найти, и я не могу запрограммировать его самостоятельно. Я надеюсь, что вы можете мне помочь.

У меня есть 2 элемента: текстовое поле и выпадающее меню (выберите/параметры).

Основываясь на рождении/году человека, я вхожу в текстовое поле, я хочу иметь связанные выпадающие значения.

Если лицо 0-17 лет, значения в выпадающем списке должны быть равны 0, 100, 200, 300, 400, 500, 600. Если человеку 18 лет или старше, значения в выпадение должно bei 300, 500, 1000, 1500, 2000, 2500.

Пример: Если я ввещу 1978 в текстовое поле, выпадающее меню должно отображать значения 300, 500, ... Если я вхожу в 2002 в текстовое поле выпадающее меню должно отображаться значения 100, 200, ...

Надеюсь, это понятно, что я ищу.

Я проверил это один: Change dropdown value based on Text Input

, а также это один, который выглядит также похоже на то, что мне нужно: jQuery - Change hidden value based on input field

Но я не могу это сделать.

jsfiddle будет действительно круто!

Заранее спасибо.

<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> 

С наилучшими пожеланиями, Энди

Answer 1

Вы могли бы справиться с этим, воспользовавшись data-* атрибутов и с помощью JQuery, чтобы определить, какие значения должны отображаться на основе выбора:

<!-- 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> 

Вы можете see a complete working example here и показано ниже:

Answer 2

https://jsfiddle.net/erjc0fna/

В принципе каждый параметр имеет класс, который идентифицирует его как lessThan18 или over18. Те, у кого нет классов, доступны для обоих случаев в соответствии с тем, что вы написали. В поле keyup для текстового поля он вычисляет возраст и скрывает/показывает правильные параметры.

Answer 3

Включить jquery:

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

После добавления иды на вход (inputId) и 2 выберите (Выбор1 и ВЫБ.2)

<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> 

код 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>