可能なすべてのバリエーションを持つ複数のメニュー選択を文字列に連結

Question

hereは、メニュー選択を文字列に連結することについての質問に対する答えをjavascriptで見つけました。 選択要素〜を選択した値からすべての組み合わせを作成することは可能ですか？

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

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

<select size="5" multiple="multiple" 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 size="5" multiple="multiple" 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 size="5" multiple="multiple" 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は、例えば選択した場合：第1選択要素から

• ：スモール、ミディアム
第2の選択要素から
• ：第三の選択要素から有機、グルメ
• ：フルーツボックス

すべての可能な組み合わせで異なる文字列を返す

• 小有機フルーツボックス
• ミディアムオーガニックフルーツボックス
• 小型グルメフルーツボックス
• ミディアムグルメフルーツボックス

Answer 1

なぜあなたは値を保存するために、配列を使用していませんか？ 3つの配列を作成します A簡単な方法：ユーザーが項目を選択すると

var itemsBoxSize; 
var itemsSpeciality; 
var itemsTypeBox; 

ので、配列に追加します。たとえば：そのような

for (i = 0; i <= itemsBoxSize.length; i++) { 
    var resultString = itemsBoxSize[i] + " " + itemsSpeciality[i] + itemsTypeBox[i]; 
} 

何か： itemsBoxSize.push("Small");

は最後に、あなたはすべてのアレイにアクセス！

Answer 2

正しいのかどうかわかりませんが、正しい方法です： 注：これは少し手作業ですが、自動化を試みることができます。

HTML：

<div id="result"></div> 

<form id="optionsForm"> 
    <select size="5" multiple="multiple" id="boxSize"> 
     <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 size="5" multiple="multiple" id="speciality"> 
     <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 size="5" multiple="multiple" id="typeBox"> 
     <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> 

のjQuery：

$(document).ready(function() { 

    // It also is used to clear the array 
    function initItems() { 
    items["boxSize"] = []; 
    items["speciality"] = []; 
    items["typeBox"] = []; 
    } 

    var items = []; 
    initItems(); 

    // When user selects items 
    $("#optionsForm").change(function() { 
    initItems(); // Clear items 
    $("select :selected").each(function(i, selected) { 
     var selectId = $(this).closest("select").attr("id"); 
     items[selectId].push($(selected).text()); 
    }); 

    showResult(); 
    }); 

    function showResult() { 
    var s = ""; 
    var highestLenght = getHighestLenght(); 
    var partialLength; 

    for (i = 0; i < highestLenght; i++) { 

     // BOX SIZE 
     partialLength = items["boxSize"].length; 
     if (partialLength >= highestLenght) { 
     s += items["boxSize"][i] + " "; 
     } else { 
     s += items["boxSize"][partialLength - 1] + " "; 
     } 

     // SPECIALITY 
     partialLength = items["speciality"].length; 
     if (partialLength >= highestLenght) { 
     s += items["speciality"][i] + " "; 
     } else { 
     s += items["speciality"][partialLength - 1] + " "; 
     } 

     // TYPE BOX 
     partialLength = items["typeBox"].length; 
     if (partialLength >= highestLenght) { 
     s += items["typeBox"][i] + " "; 
     } else { 
     s += items["typeBox"][partialLength - 1] + " "; 
     } 

     s += "<br>"; 
    } 

    $('#result').html(s); 
    } 

    // What is the highest amount of elements? 
    function getHighestLenght() { 
    var highestValues = []; 
    highestValues.push(items["boxSize"].length); 
    highestValues.push(items["speciality"].length); 
    highestValues.push(items["typeBox"].length); 
    var highest = Math.max.apply(null, highestValues); 
    return highest; 
    } 

})