检测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');

这里的警告你们可能会丢失;如果在用户切换回默认开始状态时出现场景 - ，例如，在这种情况下，'选择一个州'此背景图像必须重新出现/恢复。

来源

2015-11-19 Fred Randall

我看不出逻辑。 – AtheistP3ace

您也在不正确地关闭您的选择标记。 – AtheistP3ace

在状态下拉菜单中添加更改事件。所以只要这个值不是空的，它就会隐藏错误信息。

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

来源

2015-11-19 20:45:20 Billy

如果除缺省值之外的其他选项的值为“” – DinoMyte

OP的HTML代码指定默认选项的值为“”，则这会失败。编辑 - 我明白你现在在说什么。但我不明白为什么你会有另一个“”的价值。无论如何，这将是一个无效的选项。 – Billy

我同意，但它只是一个想法分享，如果你有这种情况下:) – DinoMyte

我没有使用图像，但它的想法相同。我看到您正在将元素直接应用于元素。我会建议只使用一类应用图像和去除类时，你不需要图像的任何更多：

小提琴：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'); 
     } 
    } 
);

来源

2015-11-19 20:44:02 AtheistP3ace

要检测一个选项是否被选中与否，你可以做到以下几点：

$('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/

来源

2015-11-19 20:44:30 DinoMyte

如果选择了一个选项（假设它与当前选定的选项不同），将会触发此选项。但是，当选择菜单打开时它不会触发。你可以使用'点击'。

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

来源

2015-11-19 20:47:10 csum

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

回答

相关问题