javascript - 如何减少对每个空选择使用错误消息

Question

<div id="deletePlace">
    <ul>
        <li class="pDeleteul">
            <label>Country</label>
            <select id="dpCountry">
                <option>choose country</option>
                <option>Damascus</option>
                <option>Aleepo</option>
            </select>
        </li>
        <li class="pDeleteul">
            <label>Cell</label>
            <select id="dpCell">
                <option>choose cell</option>
                <option>c1</option>
                <option>c2</option>
            </select>
        </li>
        <li class="pDeleteul">
            <label>Place</label>
            <select id="dpPlace">
                <option>choose place</option>
                <option>p1</option>
                <option>p2</option>
            </select>
            <input type="button" value="delete" onclick="deletePlace()"/>
        </li>
    </ul>
</div>

就是3个label，3个selection

当按下删除按钮时，如果用户没有选择任何选择的任何选项，它应该在空选择左侧显示错误消息。

我可以通过将错误消息添加到每个选择中来做到这一点，并在我的 js 中检查选择是否为空，使错误消息出现，但这让我写了越来越多的重复代码。有没有什么方法可以使用 javascript(或 jQuery)使该错误消息动态创建一个使用

Answer 1

试试这个:

$('input[value=delete]').click(function() {
    $('.error').remove();
    $('select').each(function() {
        $this = $(this);
        if ($this[0].selectedIndex === 0) {
            $this.parent().prepend('<span class="error">Error</span>');
        }
    })
});​

每一行的作用:

$('input[value=delete]').click(function() {

这将函数附加到 delete 按钮的 click 事件(使用 attribute equals selector )- 使用 .click()

$('.error').remove();

删除任何已经存在的错误(具有 error 类的 DOM 元素)- 使用 .remove()

$('select').each(function() {

在每个 select 上执行一个函数 - 使用 .each()

$this = $(this);

保存 $(this) 以备后用——如果多次使用一个对象，最好(为了性能)“缓存”它

if ($this[0].selectedIndex === 0) {

如果选择列表的selectedIndex为0则执行

$this.parent().prepend('<span class="error">Error</span>');

使用.prepend()向 .parent() 添加一些 HTML当前 select

的 ( li)

Working example here