移除最接近的下拉列表並驗證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 ...