選擇多個提交問題 - 如果未選中，POST爲空

Question

我有一個多重選擇，如下所示。

它讓我如下選擇的選項。假設選擇了3個運動項目。

當項目選擇如上所示形式提交成功。

但不幸的是，如果在提交表單時沒有選擇像下面這樣的文章，帖子是空的。

選擇框

<select style="width: 100px; height: 80px;" class="input" id="selected_sport_list" name="selected_sport_list[]" multiple=""> 
<option value="2">sport 2</option> 
<option value="3">sport 3</option> 
<option value="5">sport test x</option></select> 

我怎樣才能確保當表單提交特定項目被選中？有沒有可能使用jQuery來解決這個問題？或者如何？

感謝

Answer 1

這裏的問題是，除非用戶第一「檢查」他們的瀏覽器將不會從每個選擇框中提交值。這是標準行爲，你將不得不使用JavaScript來解決這個問題。

您需要做的是確保提交表單時，HTTP請求包含每個選擇框中存在的值。您可以通過兩種方式執行此操作：

1. 手動構建部分提交的數據並將其轉發給服務器 - 例如，通過將其包含爲查詢字符串的一部分或將填充的數據對象傳遞給某個jQuery AJAX方法或
2. 動態地向表單中添加/刪除隱藏的輸入元素以匹配選擇框狀態，以便在提交表單時這些輸入元素包含所需信息（在這種情況下，你要小心，以覆蓋用戶確實選擇一些選項太多的情況下，你不想重複條目！）

第一個選項涉及攔截表單提交併通過JavaScript提交自己修改後的請求。

第二個選項涉及向表單中添加和刪除元素，並且可以急切地執行（攔截選擇框之間的元素轉移並立即使用隱藏元素來鏡像狀態）或者懶惰地（攔截表單提交併注入在飛行中隱藏的元素）。

由於此時我們沒有掌握所有信息，因此您應該嘗試從上面選擇一種方法，並提供一些您已編寫的相關代碼。

Answer 2

HTML

<form onsubmit="return testSelects();"></form> 

JS

function testSelects() { 
    if ($('select').children(":selected").length == 0) { 
     alert("Please select options before submiting the form!"); 
     return false; 
    } 

    return true; 
} 

Answer 3

是的，當然你可以這樣做： 使用

jQuery("#form").submit(function(){ 
if(jQuery("select.input:selected").length == jQuery("select.input").length){ 
    // your actions if true 
} else { 
    // your actions if false 
} 
}); 

好運