0 
<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 个标签和 3 个选项

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

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

4

2 回答 2

3

试试这个 ：

$('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() {

这将一个函数附加到按钮的click事件delete（使用属性等于选择器） - 使用.click()

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

删除已经存在的任何错误（类的 DOM 元素error） - 使用.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( )将一些 HTML 添加到当前的.parent() ( li)select

这里的工作示例

于 2012-05-11T13:55:45.160 回答
-1

试试这个--> 

$('input[type=button]').on('click', function(e){
        $.each( $('select'), function(){ if( $(this).find('option:selected').val().indexOf('choose') > -1 ) alert('error');    })
于 2012-05-11T13:47:16.057 回答