串聯選擇菜單到一個表單，輸入

我有一個文本輸入如下：串聯選擇菜單到一個表單，輸入

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

來源

2013-09-21 R Reveley

唯一位我要去嘗試根據您所提供的代碼來更新這個。腳本標籤內容應該是這樣的：

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

這裏是一個這樣的例子還有http://jsfiddle.net/eNNZX/

請記住在div id爲「temp_display」一的jsfiddle不是必需的，它唯一的，所以你可以看到每個變化後的值。

這樣，任何時候任何選擇被改變，隱藏的輸入被更新爲所有3的連接版本。然後，當你提交頁面時，只需查看引用所需值的隱藏輸入的參數即可。

希望這會有所幫助！

來源

2013-09-21 19:21:59 Camway

雖然我不是一個javascripter，我想我會得到你。讓它知道從哪裏拉數據我只是將first_select更改爲我想要的選擇的編號＃ –

我更新了代碼，我認爲這隻會複製/粘貼。因此，第一個onchange事件將綁定到所有3個選擇標籤。在內部，我們將所有3個值連接在一起。然後我們將「my_hidden_input」設置爲連接字符串。在你的js控制檯中，如果你輸入：$（「＃my_hidden_input」）。val（）這應該返回你正在尋找的值。請記住，只有在至少有一個選擇標記已被更改後才能完成，因此您可能希望在document.ready函數中添加類似的東西 – Camway

串聯選擇菜單到一個表單，輸入

回答

相關問題