5

Blue好的，所以如果选择了带有下拉菜单前缀的项目，我有一些 jQuery 代码会显示一个输入框。

代码：

$(function() {
    $('#text1').hide();
    $('#select2').on('change', function(event) {
        var opt = this.options[ this.selectedIndex ];
        var picked_blue = $(opt).text().match(/Blue/i);
        if(picked_blue) {
            $('#text1').show();
        } else {
            $('#text1').hide();
        }
    });
});

但是我还需要添加的是，如果选择了下拉菜单中的任何其他项目，则显示其他内容。我需要显示的是另一个项目下拉菜单。

4

3 回答 3

6

这不应该为你工作：

if(picked_blue) {
  $('#text1').show();
  $('#text2').hide();
} else {
  $('#text1').hide();
  $('#text2').show();
}

在哪里text1和text2共享 DOM 中的位置，分别带有“蓝色”和“根本不是蓝色”之类的文本？

于 2012-12-19T11:08:04.010 回答
2

您需要将条件放在语句的 else 部分。

$(function() {
    $('#text1').hide();
    $('#select2').on('change', function(event) {
        var opt = this.options[ this.selectedIndex ];
        var picked_blue = $(opt).text().match(/Blue/i);
        if(picked_blue) {
            $('#text1').show();
        } else {
            $('#text1').hide();
            if($(opt).text().match(/Red/i))
            {
                  //You code here
            }
        }
    });
});

或缩短代码。

$(function() {
    $('#text1').hide();
    $('#select2').on('change', function(event) {
       selectedVal = $(this).val().toLowerCase();
       switch (selectedVal){
         case 'blue':
            //Your code
            break;
          case 'red':
           //Your code
           break;
          case 'black':
            //Your code
            break;
          default:
            //your code
        }
   });
});
于 2012-12-19T11:04:08.693 回答
1

为什么你不能尝试在 Jquery 中使用切换功能

$('#text1').toggle();
于 2012-12-19T11:04:51.230 回答