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

3 回答

• 0

  https://jsfiddle.net/erjc0fna/

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

  回复于 2024-04-30T07:53:45+08:00
• 0

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

  回复于 2024-04-30T07:53:45+08:00
• 0

  您可以通过利用 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并在下面演示：

  

  回复于 2024-04-30T07:53:45+08:00