将选择菜单连接到单个表单输入中

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

希望这会有所帮助！