如果选择了特定的 <form:option>，则限制 <form:select> 数据绑定到 modelAttribute

Question

我有一个产品类别的下拉菜单，它显示了数据库中的一组值。

为此，我使用了 Spring 标签。我希望其中一个选项显示一个称为"Others"的值，并且选择该值时，我正在显示一个文本框以接受新产品类别。

问题是当我提交表单时，product_category 被设置为 "Others,(newly added category)"。但我真正想要的只是新添加的类别。

有什么办法吗？

我的代码如下：

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');
            }
        };

选择 "others" 选项时执行

在我的模型 class 中，这只是像

这样的常规过程

    @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你就不能改变它的值所以else部分没用,
要再次启用它，请在 new_product_category 的 focusout 或 blur 上编写另一个函数，如果它的值为 "" 即空白

已更新:
另一种方法是，在表单提交时检查 $('#product_category').val()。如果是 Others 禁用它。
不要忘记为 $('#new_product_category').

添加必需的属性到 true

Answer 2

感谢所有帮助过的人。我找到了更好的方法。

我在模型中引入了一个新字段

@Transient
private String select_product_category;

然后将选中的值保存到这个字段中，当发现它的值为null

时，将这个值设置为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>

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

在我的模型中 class 我做了以下更改

@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;
    }
}

现在一切正常。

如果选择了特定的 <form:option>，则限制 <form:select> 数据绑定到 modelAttribute

restricting <form:select> from being databound to modelAttribute if a specific <form:option> is selected

java

spring-mvc

modelattribute

spring-form