检查每个<select>的值</select>

Question

我有一个结帐项目列表和无序列表，每个项目都有下拉列表：

<li class="item">
  <select name="item-custom>
    <option value="" selected></option>
    <option value="Red">Red</option>
    <option value="Blue">Blue</option>
  </select>
</li>
<li class="item">
  <select name="item-custom>
    <option value="" selected></option>
    <option value="Red">Red</option>
    <option value="Blue">Blue</option>
  </select>
</li>

...

我正在尝试检查每个li.item select并查看它是否有值，如果没有在.item中附加错误：

if( $('.item select').val() == '') {
  $($(this).closest('li')).append('<div class="error">Custom is required.</div>');
}

如果第一个li.item select为空，而不是整个列表，似乎只会接听。

Answer 1

此页面显示如何迭代列表项，您仍然可以使用测试来确定空的列表项：http://api.jquery.com/each/

Answer 2

使用.each()：

$(".item select").each(
    function(index, element)
    {
        if ($(element).val() == "")
        {
            $(element).closest('li').append('<div class="error">Custom is required.</div>');
        }
    }
);

顺便说一下，你可以（并且应该）将JQuery调用链接在一起，而不是嵌套它们。

$($(this).closest('li'))

......比

更好

$(this).closest("li")

Answer 3

$('.item option:nth-child(1):selected')
               .closest('li')
               .append('<div class="error">Custom is required.</div>');

• 选择所有option个元素，这些元素是其父级的第一个子级，并且已被选中，

• 遍历<li>

• 执行.append()

这对选择了不同选项的<select>元素没有影响。

<强> JSFIDDLE DEMO

<强>结果：

---

如果您愿意，可以这样：

$('.item option[value=""]:selected')
    .closest('li')
    .append('<div class="error">Custom is required.</div>');

Answer 4

尝试改为：

$('.item select').each(
    function(){
        if ($(this).val() == ''){
            $(this).closest('li').append('<div class="error">Custom is required.</div>');
        }
    });