将选择菜单连接成单个表单输入 [英] concatenating select menus into a single form input

问题描述

我有一个文本输入如下：

 < input class =input-largeform =form type =textname =product_data [product]id =product_description_productvalue ={$ product_data.product}/> 
  

不幸的是我希望输入这个字段的信息非常具体。我能想到的最好的解决方案是提供3个下拉菜单和一系列选项。

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

你认为什么？

我认为我几乎拥有它，但它不起作用。我会复制整个表格，但它很长，希望这位是唯一需要的位

 < form> 
< input form =formtype =hiddenname =product_data [product]id =product_description_productvalue ={$ 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 =框大小> 
< option value =超小>超小< / option> 
< option value =Small>小< / option> 
< option value =Medium>中< / option> 
< option value =大>大< / option> 
< option value =超大>超大< / option> 
< / optgroup> 
< / select> 
< select id =product_description_product_2> 
< optgroup label =专业> 
< option value =organic>有机< / option> 
< option value =seasonal>季节性< / option> 
< option value =本地种植>本地种植< / option> 
< option value =exotic>异国情调< / option> 
< option value =美食家>美食家< / option> 
< / optgroup> 
< / select> 
< select id =product_description_product_3> 
< optgroup label =框的类型> 
< option value =veg box> veg box< / option> 
< option value =水果盒>水果盒< / option> 
< option value =fruit& amp; veg box> fruit& amp; amp; amp; amp; amp; 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 并不是必需的，只有它才能在每次更改后看到值。

这种方式随时可以更改任何选择，隐藏输入会更新为连接版本所有3.然后，当您提交页面时，只需查看引用所需值的隐藏输入的参数即可。

希望这有助于您！

I have a text input as follows:

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

Unfortunately I want the information entered into this field to be very specific. The best solution I can think for this, is to provide 3 drop down menus with a range of options.

I can edit the HTML and add JavaScript as necessary, but can't edit the form processing script or the database, so the value I need to get back from the 3 select menus needs to be concatenated into a single form field value.

What do you reckon?

I think I almost have it but it isn't working. I would copy the whole form but it is very long and hopefully this bit is the only bit needed

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

解决方案

I'm going to try to update this based on the code you provided. Your script tag contents should be this:

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

Also your hidden field tag should look something like this (I'm assuming the top line, of the second block of code, was intended to be the hidden field):

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

Here is a jsfiddle with this an example as well http://jsfiddle.net/eNNZX/

Please keep in mind the div with id "temp_display" is not required, its only so you can see the value after each change.

This way anytime any of the selects are changed the hidden input is updated with the concatenated version of all 3. Then when you submit the page, just look at the parameter referencing the hidden input for your desired value.

Hope this helps!

这篇关于将选择菜单连接成单个表单输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！