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

Question

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

为此，我使用 Spring 标签。 I want one of the options to display a value called "Others" and when that value is selected I am displaying a textbox to accept a new product category.

问题是当我提交表单时，product_category 被设置为“其他，（新添加的类别）”。但我真正想要的只是新添加的类别。

有没有办法做到这一点？

我的代码如下：

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

更新：
另一种方法是在表单提交上检查$('#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>

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

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

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

现在它运行良好。