将多个菜单选择连接成具有所有可能变体的字符串

时间:2017-04-14 22:39:31

标签: javascript jquery html

我找到了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>

如果我选择例如:

  • 来自第一个选择元素:Small,Medium
  • 来自第二选择元素:有机,美食
  • 来自第三个选择元素:水果盒

使用所有可能的组合返回不同的字符串

  • 小有机水果盒
  • 中等有机水果盒
  • 小美食水果盒
  • 中型美味水果盒

2 个答案:

答案 0 :(得分:0)

为什么不使用数组来保存值? 一种简单的方法可以创建3个数组:

var itemsBoxSize;
var itemsSpeciality;
var itemsTypeBox;

因此,当用户选择一个项目时,将其添加到数组中。例如: itemsBoxSize.push("Small");

最后,您访问所有阵列:

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

类似的东西!

答案 1 :(得分:0)

我不确定它是否正确,但它是正确的方式: 注意:它仍然有点手动,但您可以尝试自动化它。

<强> 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;
  }

})