Question

我的文字输入如下：

<input class="input-large" form="form" type="text" name="product_data[product]" id="product_description_product" value="{$product_data.product}" />

不幸的是，我希望输入此字段的信息非常具体。我能想到的最佳解决方案是提供3个下拉菜单，其中包含一系列选项。

我可以编辑HTML并根据需要添加JavaScript，但不能编辑表单处理脚本或数据库，因此我需要从3个选择菜单中返回的值连接成单个表单字段值

你觉得怎么样？

我想我几乎拥有它，但它无法正常工作。我会复制整个表格，但它很长，希望这一点是唯一需要的一点

<form>
    <input form="form" type="hidden" name="product_data[product]" id="product_description_product" value="{$product_data.product}" />

    <script type="text/javascript">
        $(all_three_select_tags).change(function(){
    concatenated_string = $(#product_description_product_1).val() + $(#product_description_product_2).val() + $(#product_description_product_3).val();
    $("#product_description_product").val(concatenated_string);
    })
    </script>
    <select id="product_description_product_1">
        <optgroup label="Box size">
            <option value="Extra small">Extra small</option>
            <option value="Small">Small</option>
            <option value="Medium">Medium</option>
            <option value="Large">Large</option>
            <option value="Extra Large">Extra Large</option>
        </optgroup>
    </select>
    <select id="product_description_product_2">
        <optgroup label="Speciality">
            <option value="organic">organic</option>
            <option value="seasonal">seasonal</option>
            <option value="locally grown">locally grown</option>
            <option value="exotic">exotic</option>
            <option value="gourmet">gourmet</option>
        </optgroup>
    </select>
    <select id="product_description_product_3">
        <optgroup label="Type of box">
            <option value="veg box">veg box</option>
            <option value="fruit box">fruit box</option>
            <option value="fruit &amp; veg box">fruit &amp; veg box</option>
        </optgroup>
    </select>
</form>

Answer 1

我将尝试根据您提供的代码更新此内容。您的脚本标记内容应为：

<script type='text/javascript'>
    $("#product_description_product_1, #product_description_product_2, #product_description_product_3").change(function(){
        concatenated_string = $("#product_description_product_1").val() + $("#product_description_product_2").val() + $("#product_description_product_3").val();
        $("#product_description_product").val(concatenated_string);
    })
</script>

此外，您的隐藏字段标记应该看起来像这样（我假设第二个代码块的顶行是隐藏字段）：

<input type='hidden' value='' id="product_description_product">

这是一个jsfiddle以及一个例子http://jsfiddle.net/eNNZX/

请记住，不需要id为“temp_display”的div，只有这样才能在每次更改后看到该值。

这样，只要更改了任何选项，隐藏输入就会以所有3的连接版本进行更新。然后，当您提交页面时，只需查看引用隐藏输入的参数即可获得所需值。

希望这有帮助！

将选择菜单连接成单个表单输入

1 个答案: