Question

嘿我的开发人员，我正在学习jquery并对执行一项简单的任务表示怀疑，请帮助我。

我有一个选择字段，其默认背景颜色为红色，但是当用户点击该字段并选择其他任何内容然后选择电子邮件地址时，我想将其背景颜色更改为白色。

<select id="email" style="background-color: red">
  <option value="">Select Email Address</option>
  <option value="abc@example.com">abc@example.com</option>
  <option value="test@example.com">test@example.com</option>
</select>

到目前为止，我已经能够执行onclick函数，但是如何在其中插入其值的编码。

$('#email').click(function() {
    $('#email').css({
        'background-color': 'white',
    });
});

Answer 1

我建议您将活动从.click()更改为.change()和试试这个：

$('#email').change(function() {
    if($(this).val() != ''){
       $(this).css({
          'background-color': 'white',
       });
    }
    else{
      $(this).css({
          'background-color': 'red',
       });
    }
});

DEMO

Answer 2

这里你去（我建议绑定.change事件而不是.click）：

$('#email').change(function() {
    if ($(this).val().length) {
        $('#email').css({
            'background-color': 'white',
        });
    }
});

希望有所帮助。

Answer 3

将click()替换为change()

$('#email').change(function() {
    if($(this).val() != ''){
      $(this).css({'background-color': 'white',
    }
    else {
      $(this).css({'background-color': 'red'});
    }
});

Demo Fiddle

只有在实际更改了值时才会触发

更改，而不是单击或仅打开/关闭

Answer 4

你可以这样做：

$('#email').change(function () {
    if (this.value != '') {
        $(this).css({'background-color': 'white'});
    } else {
        $(this).css({'background-color': 'red'});
    }
});

演示：Fiddle

更新选择字段的值更改的css

4 个答案: