Question

我有HTML下拉列表;

采用以下格式编码：

   <select name="State" id="State" class="required"/>
              <option value="">--Select State--</option>
              <option value="AK">Alaska</option>
   </select>

我有一个错误的背景图片，在错误时附加到<select>标记。但是，我想删除背景图片，一旦用户使用了下拉菜单，并且当前选择了可用的option。

因此，当下拉列表打开并且通过<option>标签隐藏背景图片选择任何项目时。我本身并不需要隐藏背景图片的帮助。只是检测何时选择option的逻辑。

我尝试从这个逻辑开始

$('option:selected').css('background', 'none !important');

以下是你们可能失踪的警告;如果存在用户切换回默认开始状态的情况 - 在这种情况下例如＆＃39; 选择状态＆＃39;此背景图片必须重新出现/恢复。

Answer 1

在州下拉列表中添加更改事件。因此，每当值不为空时，它将隐藏错误消息。

$('#State').change(function() {
    if(this.value !== '') {
        //hide error
        console.log('hide');
    } else {
        //show error
        console.log('show');
    }
});

Answer 2

我没有使用图像，但它的想法相同。我看到你正在将样式直接应用于元素。我建议只使用一个类来应用图像，并在不再需要图像时删除该类：

小提琴：http://jsfiddle.net/AtheistP3ace/oLrckqzj/

HTML：

<select name="State" id="State" class="required">
    <option value="">--Select State--</option>
    <option value="AK">Alaska</option>
</select>

JS：

var select = document.getElementById('State');
select.addEventListener('change',
    function () {
        if (this.value != '') {
            this.classList.remove('required');
        }
        else {
            this.classList.add('required');
        }
    }
);

你也有这个

<select name="State" id="State" class="required"/>

应该是：

<select name="State" id="State" class="required">

使用jQuery：http://jsfiddle.net/AtheistP3ace/oLrckqzj/1/

var $select = $('#State');
$select.on('change',
    function () {
        var $this = $(this);
        if ($this.val() != '') {
            $this.removeClass('required');
        }
        else {
            $this.addClass('required');
        }
    }
);

Answer 3

要检测是否选择了某个选项，您可以执行以下操作：

   $('select').change(function()
    {
        if($(this)[0].selectedIndex == 0 && $(this).val() == "") // check if value is empty and index of the selected option is not zero.
           alert("not selected");
       else 
           alert("selected");
    });

示例：http://jsfiddle.net/WTkqn/300/

Answer 4

如果选择了某个选项，则会触发此操作，前提是它与当前选定的选项不同。但是，打开选择菜单时不会触发。你可以使用点击＆＃39;为此。

$('select').on('change', function (e) {
    console.log("changed: ", this, e);
});

检测html选择下拉列表是否处于下拉选择状态

4 个答案: