Javascript 动态验证已创建div中的所有选择选项文本

我需要你的帮助。正如您所看到的，我用新名称和选中的文本克隆了原始div，现在我想验证创建的选择，如果他们选择的选项是“选择”，则提醒用户并在该选择中聚焦

我认为在类似这样的情况下，检查名称以“newDiv”开头的div，并在其中选择与“Select”相等的文本

我希望你明白我的意思，谢谢。

jsiddle:

各种修复：

• 然后新的div没有id，所以我将过滤器更改为使用id
• 我迭代所有匹配的选定值。如果一个错误，在那里中止
• 我在检查之前删除所有选择的突出显示
• 我将焦点放在错误选项中最近的父选项上
• 我突出显示了错误选项中最近的父选项
  $（文档）.ready（函数（）{
  }))

---

.live（）

已弃用，请使用

.click（）

或

.on（“单击”

相反。JSFIDLE中的代码与OP中的代码完全不同。您不必选择Select作为选项。您可以检查小提琴，您可能需要更改小提琴的基本版本。在小提琴中，您的新div没有

name

属性，因此

div[name^=“newDiv”]

不会做任何事情。目前，您的问题和JSFIDLE有太多不一致之处，值得任何人花时间来解决。请阅读您自己的问题和JSFIDLE，调整其中一个或另一个（或两者），然后带着您的更改回来。然后我们可以提供帮助。了不起的人！这正是我需要的。非常感谢！

$('button#validate').live('click', function() {

var wrong = $('div[name^="newDiv"] select option').filter(':selected').text();

if ( wrong == "Select" )
{
    alert("Please select an option"); 
    $(this).focus();
    $(this).css("background-color","red");
}


});

var counter = 2;

$("input#clone").click(function () {
    //Let's make a copy to work with
    var originalDiv = $("div#old");
    var cloneDiv = originalDiv.clone();
    //Renaming cloneDiv
    cloneDiv.attr('id', 'newDiv' + counter);
    //Renaming inputs in  cloneDiv
    $("[name='id']", cloneDiv).attr('name', 'id' + counter);
    $("[name='email']", cloneDiv).attr('name', 'email' + counter);
    $("[name='emails']", cloneDiv).attr('name', 'emails' + counter);
    //Value first textfield
    $("[name='id" + counter + "']", cloneDiv).val(+counter);

    //Value Select
    $("[name='email" + counter + "']", cloneDiv).val($("[name='email'] option:selected", originalDiv).val());
    $("[name='emails" + counter + "']", cloneDiv).val($("[name='emails'] option:selected", originalDiv).val());

    //Append to originalDiv container whatever it is...
    originalDiv.parent().append(cloneDiv);
    //OR Append to body after old div
    //$('.old:last').after(cloneDiv);
    //Increment counter
    counter++;
});

$("input#remove").click(function (e) {
    if (counter > 2) {
        $('#newDiv' + (counter - 1)).remove();
        counter--;
    }
});

$('#validate').click(function () {
    $('div[id^="newDiv"] select').css("background-color", "");
    $('div[id^="newDiv"] select option').filter(':selected').each(function () {
        var select = $(this);
        if (select.text() == "Select") {
            alert("Please select an option");
            select.closest('select').focus().css("background-color", "red");
            return false;
        }
    });
});