用于下拉选择管理的jquery代码中的jsp if

我有一个产品的表格，可以有或没有一些类别。该产品是由web服务器提供的，因此我使用jsp检索它。 该产品有一个代码和一个版本。版本可以与类别关联，也可以不与类别关联。 如果产品有多个类别，用户必须从类别下拉菜单中选择一个类别。更改类别也会更改表单中发送的版本。 如果产品没有类别，则将产品版本发送到表单，而不选择类别

例如，我有一个产品A，代码为A01，这是一个类别和版本图： {“大”：“VL”，“中”：“VM”，“小”：“VS”} 以及代码为B01和版本为VB的产品B

在我的代码中，我检查产品是否有大于1的类别和版本的映射，以选择是否显示select。 这是通过jsp完成的，如下所示：

<% Map<String, String> categoriesVersions = product.getCategoriesVersionsMap(); %>
<% if(categoriesVersions != null && categoriesVersions.size() > 1) { %>
    <div class="rowElem">
        <label>
           Category
        </label>  
        <div class="select">
            <select name="product_version" class="mandatory">
                <option value=""></option>
                <% for(String category: categoriesVersions.keySet()) { %>                                          
                    <option value="<%=categoriesVersions.get(category)%>"><%=category%></option>                   
                <%}%>

            </select>
        </div>
    </div>      
<% } %>

1) { %>
类别

然后我使用jQuery管理产品版本的设置，如下所示：

jQuery(function ($) {

    $(function() {
        <% if (categoriesVersions != null && categoriesVersions.size() <= 1){%>
            $form.append('<input type="hidden" name="product_version" value="<%=product.getVersion()%>" />');
        <% } else {%>
            $form.append('<input type="hidden" name="product_category" value="" />');
            $form.on('change', 'select[name="product_version"]', function() {
                var category = $('select[name="product_version"] option:selected').text();
                $form.find('input[name="product_category"]').val(category);
            });
        <% } %>
    });
});

jQuery（函数（$）{
$（函数（）{
TL；DR.您必须知道JSP的哪些部分是在以下位置执行的：


您的JSP代码将在服务器上执行。结果将呈现并发送到客户端（浏览器）。浏览器对JSP代码一无所知

所有HTML、CSS和Javascript代码都在客户机上执行，即在浏览器中执行


这意味着：

jQuery(function ($) {
    $(function() {
        <% if (categoriesVersions != null && categoriesVersions.size() <= 1){%>
            $form.append('<input type="hidden" name="product_version" value="<%=product.getVersion()%>" />');
        <% } else {%>
            $form.append('<input type="hidden" name="product_category" value="" />');
            $form.on('change', 'select[name="product_version"]', function() {
                var category = $('select[name="product_version"] option:selected').text();
                $form.find('input[name="product_category"]').val(category);
            });
        <% } %>
    });
});

jQuery（函数（$）{
$（函数（）{
谢谢你的解释和建议，答案很清楚。
jQuery(function ($) {   
    $(function() {
        $form.append('<input type="hidden" name="product_version" value="someProductId" />');
    });
});

jQuery(function ($) {
    $(function() {
        $form.append('<input type="hidden" name="product_category" value="" />');
        $form.on('change', 'select[name="product_version"]', function() {
            var category = $('select[name="product_version"] option:selected').text();
            $form.find('input[name="product_category"]').val(category);
        });
    });
});

<form>
    ... your select fields ...
    <% if (categoriesVersions != null && categoriesVersions.size() <= 1){%>
        <input type="hidden" name="product_version" value="<%=product.getVersion()%>" />
    <% } else {%>
        <input type="hidden" name="product_category" value="" />
    <% } %>
</form>

jQuery(function ($) {
    $(function() {
        if( /* Javascript condition here */ ) {
            $form.append('<input type="hidden" name="product_category" value="" />');
            $form.on('change', 'select[name="product_version"]', function() {
                var category = $('select[name="product_version"] option:selected').text();
                $form.find('input[name="product_category"]').val(category);
            });
        }
    });
});