限制<form:select>從數據綁定到modelAttribute如果選擇了特定的<form:option>

Question

我有一個產品類別的下拉菜單，它顯示了數據庫中的一組值。

爲此，我使用Spring標記。我希望其中一個選項顯示一個名爲「Others」的值，當選擇該值時，我顯示一個文本框以接受新的產品類別。

問題是當我提交表單時，product_category被設置爲「Others，（新增類別）」。但我真正想要的只是新增的類別。

有沒有辦法做到這一點？

我的代碼如下：

add.jsp

<form:form action="${actionURL}" method="POST" modelAttribute="Record"> 

.................. 
.................. 

           <div class="row"> 
           <section class="col col-4"> 
            <label class="label">Product Category</label> <label 
             class="select"> <form:select id="product_category" 
              path="product_category" onchange="add_new_productCategory();"> 
              <form:option value="">Choose category</form:option> 
              <form:options items="${productOptions}" 
               itemValue="product_category" itemLabel="product_category" /> 
              <form:option itemLabel="Others" value="Others"/>   
             </form:select><i></i> 
            </label> 
           </section> 
           <section class="col col-4"> 
            <label class="label">New Category</label> <label class="input"> 
             <form:input type="text" path="product_category" 
              id="new_product_category" disabled="disabled" required="required" /> 
            </label> 
           </section> 
          </div> 

............................ 
................... 

<input type="submit" value="Submit" class="button"> 

............................. 

我使用下面的腳本

function() { 
      if ($("#product_category").val() == 'Others') { 
       $('#new_product_category').prop('disabled', false); 
      } else { 
       $('#new_product_category').prop('disabled', 'disabled'); 
      } 
     }; 

當 「其他」 選項被選中

這是越來越執行

在我的模特班裏，這只是一般的過程，比如

@Column(name = "PRODUCT_CATEGORY") 
private String product_category; 

在我的控制器我有

@RequestMapping(value = "/add.html", method = RequestMethod.GET) 
public String getRegisterPage(Model model) { 
    System.out.println("-----------------add records ---------------------"); 

    model.addAttribute("Record", new RecordParams()); 

    List<ProductCategory> productOptions = listProductParamsService.findProductCategories(); 
    model.addAttribute("productOptions", productOptions); 
    return "add"; 
} 

和

@RequestMapping(value = "/add.html", method = RequestMethod.POST) 
public String saveRecord(@ModelAttribute("Record") RecordParams recordParams) { 
    System.out.println(recordParams); 
    RegisterService.addRecord(recordParams); 
    return "redirect:/add.html"; 
} 

一切都按預期工作除了產品類別，其在打印時被顯示爲

RecordParams [id=null,................., product_category=Others,IPTL,....] 

我該怎麼做才能糾正他的，請幫忙？

在此先感謝。

Answer 1

如果我明白你的問題，嘗試做如下建議，這可能會幫助您：

如果你想提交單product_category，
禁用product_category和使new_product_category如果product_category值Others和反之亦然...

function() { 
    if ($("#product_category").val() == 'Others') { 
     $('#product_category').prop('disabled', true); // disabled 
     $('#new_product_category').prop('disabled', false); 
    } 
    //else { 
     //$('#new_product_category').prop('disabled', 'disabled'); 
     // $('#product_category').prop('disabled', false); 
     // $('#new_product_category').prop('disabled', true); //disabled 
    //} 
}; 

這裏一旦你已禁用product_category你不能改變它的值，否則部分是沒用的，
要再次啓用它，寫focusout或new_product_categoryblur另一個函數，如果它的值是""即BLANK

更新：
另一種方法是，檢查$('#product_category').val()表格提交。如果是Others則禁用它。
不要忘記將要求的屬性添加到true$('#new_product_category')。

Answer 2

感謝所有幫助過我的人。我發現了一個更好的方法。

我在我的模型

@Transient 
private String select_product_category; 

推出一個新的領域，然後保存所選擇的值到該區域，當它的價值被發現空

我做了以下修改設置這個值PRODUCT_CATEGORY碼。

<form:form action="${actionURL}" method="POST" modelAttribute="Record"> 

.................. 
.................. 

          <div class="row"> 
          <section class="col col-4"> 
           <label class="label">Product Category</label> <label 
            class="select"> <form:select id="product_category" 
             path="select_product_category" onchange="add_new_productCategory();"> 
             <form:option value="">Choose category</form:option> 
             <form:options items="${productOptions}" 
              itemValue="product_category" itemLabel="product_category" /> 
             <form:option itemLabel="Others" value="Others"/>   
            </form:select><i></i> 
           </label> 
          </section> 
          <section class="col col-4"> 
           <label class="label">New Category</label> <label class="input"> 
            <form:input type="text" path="product_category" 
             id="new_product_category" disabled="disabled" required="required" /> 
           </label> 
          </section> 
         </div> 

............................ 
................... 

在我的模型類我做了以下修改

@Transient 
private String select_product_category; 

@Column(name = "PRODUCT_CATEGORY") 
private String product_category; 

----------------------------- 


    public String getSelect_product_category() { 
    return select_product_category; 
} 

public void setSelect_product_category(String select_product_category) { 

    if (!select_product_category.equals("Others")) { 
     setProduct_category(select_product_category); 
    } else { 
     this.select_product_category = select_product_category; 
    } 
} 

public String getProduct_category() { 
    return product_category; 
} 

public void setProduct_category(String product_category) { 
    if (product_category.equals(null)) { 
     this.product_category = getSelect_product_category(); 
    } else { 
     this.product_category = product_category; 
    } 
} 

現在，它的工作完美。