根据文本字段中的输入更改下拉值

Question

我试图找到一个解决方案，但我找不到它，我无法自己编程。我希望你能帮助我。

我有 2 个元素：一个文本字段和一个下拉菜单（选择/选项）。

根据我在文本字段中输入的人的出生/年份，我想要一个相关的下拉值。

如果这个人是 0-17 岁，下拉列表中的值应该是 0、100、200、300、400、500、600。 如果此人年满 18 岁，则下拉列表中的值应为 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>

在 input(inputId) 和 2 select(select1 and select2) 中添加 id 后

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