根据textfield中的输入更改下拉列表值 [英] Change Dropdown values based on input in textfield

问题描述

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

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

根据我进入文本框的一个人的出生/年份，我想要有一个相关的下拉列表值。

如果该人是0 -17岁，下降的价值应为0，100，200，300，400，500，600。
如果该人年满18岁，下降的价值应为300 ，500，1000，1500，2000，2500。

示例：如果我在文本字段中输入1978，则下拉菜单应显示值300,500，...
如果我输入2002到文本字段，下拉菜单应该显示值100,200，...

我希望这是可以理解的，我在看什么for。

我已经检查过这个：

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

解决方案

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 :

这篇关于根据textfield中的输入更改下拉列表值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！