我有一个文本输入如下:
<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 & veg box">fruit & 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/ http://jsfiddle.net/eNNZX/
请记住,ID 为“temp_display”的 div 不是必需的,它只是为了让您可以在每次更改后看到值。
这样,每当任何选择发生更改时,隐藏输入都会更新为所有 3 个选择的串联版本。然后,当您提交页面时,只需查看引用隐藏输入的参数即可获得所需的值。
希望这可以帮助!
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)