移除最接近的下拉列表并验证Jquery中的下拉列表

Question

我目前拥有的是这个代码，它在点击add.png图片时继续追加新的下拉列表。 我需要的是点击remove.png图片逐个删除下拉菜单。

<tr> 
    <td valign="top">Order</td> 
    <td colspan="3"> 
    <div id="salesPersonList"> 
     <select name="sales[]" id="sales" class="sales" style="margin-bottom:1px;"> 
      <option></option> 
      <?php 
       require_once '../model/sales.php'; 
       @$result2=Sales::getAllSalesPerson(); 
       while($value2=mysql_fetch_assoc($result2)){ 
      ?> 
      <option value="<?php echo $value2['id']; ?>"> 
       <?php echo $value2['name'] ?> 
      </option> 
      <?php } ?> 
     </select> 
    <span class="salesPersonEr" style="display:none;color:red;margin-left:30px;">Select the Sales Person Order</span> 
    <img src="../../common/images/add.png" width="20" height="20" name="add" value="Add" onclick="addSalesPerson()" style="margin-left:323px;margin-top:-23px;"/> 
    <img src="../../common/images/remove.png" width="18" height="18" name="del" id="del" value="del" onclick="removeSalesPerson()"/> 
    </div> 
    </td> 

脚本： -

function addSalesPerson(){ 
    var salesPersonListt=$('#sales').html(); 
    $('#salesPersonList').append("<select name='sales[]' id='sales' class='sales' style='margin-bottom:1px'>"+salesPersonListt+"</select>"); 
} 

function removeSalesPerson(){ 
    //Please Help 
} 

的附加部件是完美的，它的工作原理。我需要的是去除部分。 而另一部分，我需要的是当我提交按钮（#submit）单击窗体必须进行验证，例如，不应该成为一个下拉选项是： -

1. 空（也就是没有选择选项值）。
2. 特定的下拉选项不应等于另一个下拉选项。 （例如： - 在第一个附加下拉菜单中的3-Mark的SalesPerson id以及第五个附加下拉菜单中也包含3-Mark的SalesPerson ID）

任何帮助非常感谢！

Answer 1

您可以检查是否存在使用jQuery对象的length财产多个匹配的元素，并使用.remove()方法删除元素：

function removeSalesPerson(){ 
if($('#salesPersonList select').length > 1) 
    $('#salesPersonList select:last').remove(); 
} 

为了验证，你可以使用event.preventDefault()方法，以防止正常形成提交过程和稍后手动提交表单，如果使用验证成功submit()方法：

$("#submit").click(function(e){ 
e.preventDefault(); // prevent normal form submission 
var failure = false, 
emptySelects = $("#salesPersonList select").filter(function(){ // loops through all selects 
    return !this.value; // returns empty selects 
}); 
if(emptySelects.length) // if there are empty selects, simply return. 
    return; 
else{ 
    // loop through each select and compare it's value with the rest of selects 
    $("#salesPersonList select").each(function(){ 
    var val = this.value, // store the value of current select 
    matches = $("#salesPersonList select").not(this).filter(function(){ // loops through rest of the selects 
      return this.value == val; // return selects whose value match the saved value 
    }); 
    if(matches.length){ // if there is any other select with matching value 
     failure = true; // set a boolean indicating loop is exited with a match 
     return false; // exits the each loop since a match is found, no need of further iteration 
    } 
    }); 
} 
if(!failure) // checks whether the loop exited with or without a match 
    $("form")[0].submit(); //if there are no matches submit the form manually 
}); 

---

个

其它参考文献：

• each() - 遍历一个jquery对象
• filter() - 通过针对每个元素
• not()执行功能筛一个jquery对象 - 删除从一个jQuery对象匹配的元素

附注：你正在追加元素id，这是无效的...从动态临时删除id属性lates ...