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

https://jsfiddle.net/erjc0fna/

基本上每个选项都有一个类，可以将其标识为lessThan18或over18。根据你写的内容，没有类的那些可用于任何一种情况。在文本框的keyup上，它会计算年龄并隐藏/显示正确的选项。

Answer 2

您可以利用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 3

包括jquery：

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

将ids添加到输入（inputId）和2选择（select1和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>

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

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

3 个答案: