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

concatenating select menus into a single form input

本文关键字：单个 表单 输入 连接 选择 菜单      更新时间：2023-09-26

我有一个文本输入如下：

<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>

我将尝试根据您提供的代码对其进行更新。 脚本标记内容应如下所示：

<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 个选择的级联版本。 然后，当您提交页面时，只需查看引用所需值的隐藏输入的参数。

希望这有帮助！

相关文章：