group option items javascript












1















I have a multiple select which contains options



<select id="cart" name="cart" multiple>
<option price="4.00" name="Green Beans">
<option price="4.00" name="Green Beans">
<option price="4.00" name="Green Beans">
<option price="6.00" name="Blue Beans">
<option price="7.00" name="Black Beans">
<option price="7.00" name="Black Beans">
</select>


I want to group them using javascript so I can obtain



<select id="cart" name="cart" multiple>
<option price="4.00" name="3x Green Beans">
<option price="6.00" name="1x Blue Beans">
<option price="7.00" name="2x Black Beans">
</select>









share|improve this question




















  • 1





    what did you try so far ?

    – MrAleister
    Nov 24 '18 at 16:14






  • 1





    What is the source of your data? Are you receive html?

    – Jim B.
    Nov 24 '18 at 16:15











  • Why do you need a name on <option>?

    – charlietfl
    Nov 24 '18 at 16:18











  • When should the grouping occur? By event or initially?

    – UModeL
    Nov 24 '18 at 16:20











  • the grouping should occur when i click a button

    – xtrashild
    Nov 24 '18 at 16:27
















1















I have a multiple select which contains options



<select id="cart" name="cart" multiple>
<option price="4.00" name="Green Beans">
<option price="4.00" name="Green Beans">
<option price="4.00" name="Green Beans">
<option price="6.00" name="Blue Beans">
<option price="7.00" name="Black Beans">
<option price="7.00" name="Black Beans">
</select>


I want to group them using javascript so I can obtain



<select id="cart" name="cart" multiple>
<option price="4.00" name="3x Green Beans">
<option price="6.00" name="1x Blue Beans">
<option price="7.00" name="2x Black Beans">
</select>









share|improve this question




















  • 1





    what did you try so far ?

    – MrAleister
    Nov 24 '18 at 16:14






  • 1





    What is the source of your data? Are you receive html?

    – Jim B.
    Nov 24 '18 at 16:15











  • Why do you need a name on <option>?

    – charlietfl
    Nov 24 '18 at 16:18











  • When should the grouping occur? By event or initially?

    – UModeL
    Nov 24 '18 at 16:20











  • the grouping should occur when i click a button

    – xtrashild
    Nov 24 '18 at 16:27














1












1








1








I have a multiple select which contains options



<select id="cart" name="cart" multiple>
<option price="4.00" name="Green Beans">
<option price="4.00" name="Green Beans">
<option price="4.00" name="Green Beans">
<option price="6.00" name="Blue Beans">
<option price="7.00" name="Black Beans">
<option price="7.00" name="Black Beans">
</select>


I want to group them using javascript so I can obtain



<select id="cart" name="cart" multiple>
<option price="4.00" name="3x Green Beans">
<option price="6.00" name="1x Blue Beans">
<option price="7.00" name="2x Black Beans">
</select>









share|improve this question
















I have a multiple select which contains options



<select id="cart" name="cart" multiple>
<option price="4.00" name="Green Beans">
<option price="4.00" name="Green Beans">
<option price="4.00" name="Green Beans">
<option price="6.00" name="Blue Beans">
<option price="7.00" name="Black Beans">
<option price="7.00" name="Black Beans">
</select>


I want to group them using javascript so I can obtain



<select id="cart" name="cart" multiple>
<option price="4.00" name="3x Green Beans">
<option price="6.00" name="1x Blue Beans">
<option price="7.00" name="2x Black Beans">
</select>






javascript html select grouping options






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 24 '18 at 16:44









Foo

1




1










asked Nov 24 '18 at 16:10









xtrashildxtrashild

61




61








  • 1





    what did you try so far ?

    – MrAleister
    Nov 24 '18 at 16:14






  • 1





    What is the source of your data? Are you receive html?

    – Jim B.
    Nov 24 '18 at 16:15











  • Why do you need a name on <option>?

    – charlietfl
    Nov 24 '18 at 16:18











  • When should the grouping occur? By event or initially?

    – UModeL
    Nov 24 '18 at 16:20











  • the grouping should occur when i click a button

    – xtrashild
    Nov 24 '18 at 16:27














  • 1





    what did you try so far ?

    – MrAleister
    Nov 24 '18 at 16:14






  • 1





    What is the source of your data? Are you receive html?

    – Jim B.
    Nov 24 '18 at 16:15











  • Why do you need a name on <option>?

    – charlietfl
    Nov 24 '18 at 16:18











  • When should the grouping occur? By event or initially?

    – UModeL
    Nov 24 '18 at 16:20











  • the grouping should occur when i click a button

    – xtrashild
    Nov 24 '18 at 16:27








1




1





what did you try so far ?

– MrAleister
Nov 24 '18 at 16:14





what did you try so far ?

– MrAleister
Nov 24 '18 at 16:14




1




1





What is the source of your data? Are you receive html?

– Jim B.
Nov 24 '18 at 16:15





What is the source of your data? Are you receive html?

– Jim B.
Nov 24 '18 at 16:15













Why do you need a name on <option>?

– charlietfl
Nov 24 '18 at 16:18





Why do you need a name on <option>?

– charlietfl
Nov 24 '18 at 16:18













When should the grouping occur? By event or initially?

– UModeL
Nov 24 '18 at 16:20





When should the grouping occur? By event or initially?

– UModeL
Nov 24 '18 at 16:20













the grouping should occur when i click a button

– xtrashild
Nov 24 '18 at 16:27





the grouping should occur when i click a button

– xtrashild
Nov 24 '18 at 16:27












2 Answers
2






active

oldest

votes


















0














My idea: Getting all options tags, then using while loop to check until the tags array doesn't have any item.



Inside the loop, we try to compare price attribute in the first item of the array with the price attribute of the others. After getting, push them to the result array.



Then, we use the new loop to update the name attribute to the specific tag and delete the duplicate(s).



You can use F12 to check html code in the result.



Result:



<select id="cart" name="cart" multiple="">
<option price="4.00" name="3x Green Beans">Item 1</option>
<option price="6.00" name="1x Blue Beans">Item 4</option>
<option price="7.00" name="2x Black Beans">Item 5</option>
</select>





var options = Array.from(document.querySelectorAll('option'));

var result = ;

while (options.length) {
var price = options[0].getAttribute('price');

var items = options.filter(x => x.getAttribute('price') === price);

items.forEach(x => options.splice(options.findIndex(e => e.getAttribute('price') === x.getAttribute('price')),1));

result.push(items);
}

for (var items of result) {
var price = items[0].getAttribute('price');

var prices = Array.from(document.querySelectorAll(`[price='${price}']`));

var name = prices[0].getAttribute('name');

prices[0].setAttribute('name', `${prices.length}x ${name}`);

var temp = prices.filter((x, y) => y);

temp.forEach(x => x.remove());
}

<select id="cart" name="cart" multiple>
<option price="4.00" name="Green Beans">Item 1
<option price="4.00" name="Green Beans">Item 2
<option price="4.00" name="Green Beans">Item 3
<option price="6.00" name="Blue Beans">Item 4
<option price="7.00" name="Black Beans">Item 5
<option price="7.00" name="Black Beans">Item 6
</select>








share|improve this answer

































    0














    See comments inline below, but be warned that your existing HTML is invalid because there is no such attribute as price and with a select, you should have closing option tags and the option elements should contain the default text to display.




    // Convert initial options to an array
    let input =
    Array.prototype.slice.call(document.querySelectorAll("#cart > option"));

    let output = ; // Prepare final array

    // Loop over initial array
    input.forEach(function(item, pos) {
    let sItem = item.outerHTML; // Convert DOM element to string

    // If output array doesn't contain input string...
    if(output.indexOf(sItem) == -1){
    output.push(sItem); // Add it to the output array
    }
    });

    // Replace the select with the output
    document.getElementById("cart").innerHTML = output.join("");

    <select id="cart" name="cart" multiple>
    <option value="4.00">Green Beans</option>
    <option value="4.00">Green Beans</option>
    <option value="4.00">Green Beans</option>
    <option value="6.00">Blue Beans</option>
    <option value="7.00">Black Beans</option>
    <option value="7.00">Black Beans</option>
    </select>








    share|improve this answer























      Your Answer






      StackExchange.ifUsing("editor", function () {
      StackExchange.using("externalEditor", function () {
      StackExchange.using("snippets", function () {
      StackExchange.snippets.init();
      });
      });
      }, "code-snippets");

      StackExchange.ready(function() {
      var channelOptions = {
      tags: "".split(" "),
      id: "1"
      };
      initTagRenderer("".split(" "), "".split(" "), channelOptions);

      StackExchange.using("externalEditor", function() {
      // Have to fire editor after snippets, if snippets enabled
      if (StackExchange.settings.snippets.snippetsEnabled) {
      StackExchange.using("snippets", function() {
      createEditor();
      });
      }
      else {
      createEditor();
      }
      });

      function createEditor() {
      StackExchange.prepareEditor({
      heartbeatType: 'answer',
      autoActivateHeartbeat: false,
      convertImagesToLinks: true,
      noModals: true,
      showLowRepImageUploadWarning: true,
      reputationToPostImages: 10,
      bindNavPrevention: true,
      postfix: "",
      imageUploader: {
      brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
      contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
      allowUrls: true
      },
      onDemand: true,
      discardSelector: ".discard-answer"
      ,immediatelyShowMarkdownHelp:true
      });


      }
      });














      draft saved

      draft discarded


















      StackExchange.ready(
      function () {
      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53459996%2fgroup-option-items-javascript%23new-answer', 'question_page');
      }
      );

      Post as a guest















      Required, but never shown

























      2 Answers
      2






      active

      oldest

      votes








      2 Answers
      2






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes









      0














      My idea: Getting all options tags, then using while loop to check until the tags array doesn't have any item.



      Inside the loop, we try to compare price attribute in the first item of the array with the price attribute of the others. After getting, push them to the result array.



      Then, we use the new loop to update the name attribute to the specific tag and delete the duplicate(s).



      You can use F12 to check html code in the result.



      Result:



      <select id="cart" name="cart" multiple="">
      <option price="4.00" name="3x Green Beans">Item 1</option>
      <option price="6.00" name="1x Blue Beans">Item 4</option>
      <option price="7.00" name="2x Black Beans">Item 5</option>
      </select>





      var options = Array.from(document.querySelectorAll('option'));

      var result = ;

      while (options.length) {
      var price = options[0].getAttribute('price');

      var items = options.filter(x => x.getAttribute('price') === price);

      items.forEach(x => options.splice(options.findIndex(e => e.getAttribute('price') === x.getAttribute('price')),1));

      result.push(items);
      }

      for (var items of result) {
      var price = items[0].getAttribute('price');

      var prices = Array.from(document.querySelectorAll(`[price='${price}']`));

      var name = prices[0].getAttribute('name');

      prices[0].setAttribute('name', `${prices.length}x ${name}`);

      var temp = prices.filter((x, y) => y);

      temp.forEach(x => x.remove());
      }

      <select id="cart" name="cart" multiple>
      <option price="4.00" name="Green Beans">Item 1
      <option price="4.00" name="Green Beans">Item 2
      <option price="4.00" name="Green Beans">Item 3
      <option price="6.00" name="Blue Beans">Item 4
      <option price="7.00" name="Black Beans">Item 5
      <option price="7.00" name="Black Beans">Item 6
      </select>








      share|improve this answer






























        0














        My idea: Getting all options tags, then using while loop to check until the tags array doesn't have any item.



        Inside the loop, we try to compare price attribute in the first item of the array with the price attribute of the others. After getting, push them to the result array.



        Then, we use the new loop to update the name attribute to the specific tag and delete the duplicate(s).



        You can use F12 to check html code in the result.



        Result:



        <select id="cart" name="cart" multiple="">
        <option price="4.00" name="3x Green Beans">Item 1</option>
        <option price="6.00" name="1x Blue Beans">Item 4</option>
        <option price="7.00" name="2x Black Beans">Item 5</option>
        </select>





        var options = Array.from(document.querySelectorAll('option'));

        var result = ;

        while (options.length) {
        var price = options[0].getAttribute('price');

        var items = options.filter(x => x.getAttribute('price') === price);

        items.forEach(x => options.splice(options.findIndex(e => e.getAttribute('price') === x.getAttribute('price')),1));

        result.push(items);
        }

        for (var items of result) {
        var price = items[0].getAttribute('price');

        var prices = Array.from(document.querySelectorAll(`[price='${price}']`));

        var name = prices[0].getAttribute('name');

        prices[0].setAttribute('name', `${prices.length}x ${name}`);

        var temp = prices.filter((x, y) => y);

        temp.forEach(x => x.remove());
        }

        <select id="cart" name="cart" multiple>
        <option price="4.00" name="Green Beans">Item 1
        <option price="4.00" name="Green Beans">Item 2
        <option price="4.00" name="Green Beans">Item 3
        <option price="6.00" name="Blue Beans">Item 4
        <option price="7.00" name="Black Beans">Item 5
        <option price="7.00" name="Black Beans">Item 6
        </select>








        share|improve this answer




























          0












          0








          0







          My idea: Getting all options tags, then using while loop to check until the tags array doesn't have any item.



          Inside the loop, we try to compare price attribute in the first item of the array with the price attribute of the others. After getting, push them to the result array.



          Then, we use the new loop to update the name attribute to the specific tag and delete the duplicate(s).



          You can use F12 to check html code in the result.



          Result:



          <select id="cart" name="cart" multiple="">
          <option price="4.00" name="3x Green Beans">Item 1</option>
          <option price="6.00" name="1x Blue Beans">Item 4</option>
          <option price="7.00" name="2x Black Beans">Item 5</option>
          </select>





          var options = Array.from(document.querySelectorAll('option'));

          var result = ;

          while (options.length) {
          var price = options[0].getAttribute('price');

          var items = options.filter(x => x.getAttribute('price') === price);

          items.forEach(x => options.splice(options.findIndex(e => e.getAttribute('price') === x.getAttribute('price')),1));

          result.push(items);
          }

          for (var items of result) {
          var price = items[0].getAttribute('price');

          var prices = Array.from(document.querySelectorAll(`[price='${price}']`));

          var name = prices[0].getAttribute('name');

          prices[0].setAttribute('name', `${prices.length}x ${name}`);

          var temp = prices.filter((x, y) => y);

          temp.forEach(x => x.remove());
          }

          <select id="cart" name="cart" multiple>
          <option price="4.00" name="Green Beans">Item 1
          <option price="4.00" name="Green Beans">Item 2
          <option price="4.00" name="Green Beans">Item 3
          <option price="6.00" name="Blue Beans">Item 4
          <option price="7.00" name="Black Beans">Item 5
          <option price="7.00" name="Black Beans">Item 6
          </select>








          share|improve this answer















          My idea: Getting all options tags, then using while loop to check until the tags array doesn't have any item.



          Inside the loop, we try to compare price attribute in the first item of the array with the price attribute of the others. After getting, push them to the result array.



          Then, we use the new loop to update the name attribute to the specific tag and delete the duplicate(s).



          You can use F12 to check html code in the result.



          Result:



          <select id="cart" name="cart" multiple="">
          <option price="4.00" name="3x Green Beans">Item 1</option>
          <option price="6.00" name="1x Blue Beans">Item 4</option>
          <option price="7.00" name="2x Black Beans">Item 5</option>
          </select>





          var options = Array.from(document.querySelectorAll('option'));

          var result = ;

          while (options.length) {
          var price = options[0].getAttribute('price');

          var items = options.filter(x => x.getAttribute('price') === price);

          items.forEach(x => options.splice(options.findIndex(e => e.getAttribute('price') === x.getAttribute('price')),1));

          result.push(items);
          }

          for (var items of result) {
          var price = items[0].getAttribute('price');

          var prices = Array.from(document.querySelectorAll(`[price='${price}']`));

          var name = prices[0].getAttribute('name');

          prices[0].setAttribute('name', `${prices.length}x ${name}`);

          var temp = prices.filter((x, y) => y);

          temp.forEach(x => x.remove());
          }

          <select id="cart" name="cart" multiple>
          <option price="4.00" name="Green Beans">Item 1
          <option price="4.00" name="Green Beans">Item 2
          <option price="4.00" name="Green Beans">Item 3
          <option price="6.00" name="Blue Beans">Item 4
          <option price="7.00" name="Black Beans">Item 5
          <option price="7.00" name="Black Beans">Item 6
          </select>








          var options = Array.from(document.querySelectorAll('option'));

          var result = ;

          while (options.length) {
          var price = options[0].getAttribute('price');

          var items = options.filter(x => x.getAttribute('price') === price);

          items.forEach(x => options.splice(options.findIndex(e => e.getAttribute('price') === x.getAttribute('price')),1));

          result.push(items);
          }

          for (var items of result) {
          var price = items[0].getAttribute('price');

          var prices = Array.from(document.querySelectorAll(`[price='${price}']`));

          var name = prices[0].getAttribute('name');

          prices[0].setAttribute('name', `${prices.length}x ${name}`);

          var temp = prices.filter((x, y) => y);

          temp.forEach(x => x.remove());
          }

          <select id="cart" name="cart" multiple>
          <option price="4.00" name="Green Beans">Item 1
          <option price="4.00" name="Green Beans">Item 2
          <option price="4.00" name="Green Beans">Item 3
          <option price="6.00" name="Blue Beans">Item 4
          <option price="7.00" name="Black Beans">Item 5
          <option price="7.00" name="Black Beans">Item 6
          </select>





          var options = Array.from(document.querySelectorAll('option'));

          var result = ;

          while (options.length) {
          var price = options[0].getAttribute('price');

          var items = options.filter(x => x.getAttribute('price') === price);

          items.forEach(x => options.splice(options.findIndex(e => e.getAttribute('price') === x.getAttribute('price')),1));

          result.push(items);
          }

          for (var items of result) {
          var price = items[0].getAttribute('price');

          var prices = Array.from(document.querySelectorAll(`[price='${price}']`));

          var name = prices[0].getAttribute('name');

          prices[0].setAttribute('name', `${prices.length}x ${name}`);

          var temp = prices.filter((x, y) => y);

          temp.forEach(x => x.remove());
          }

          <select id="cart" name="cart" multiple>
          <option price="4.00" name="Green Beans">Item 1
          <option price="4.00" name="Green Beans">Item 2
          <option price="4.00" name="Green Beans">Item 3
          <option price="6.00" name="Blue Beans">Item 4
          <option price="7.00" name="Black Beans">Item 5
          <option price="7.00" name="Black Beans">Item 6
          </select>






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Nov 24 '18 at 16:42

























          answered Nov 24 '18 at 16:36









          FooFoo

          1




          1

























              0














              See comments inline below, but be warned that your existing HTML is invalid because there is no such attribute as price and with a select, you should have closing option tags and the option elements should contain the default text to display.




              // Convert initial options to an array
              let input =
              Array.prototype.slice.call(document.querySelectorAll("#cart > option"));

              let output = ; // Prepare final array

              // Loop over initial array
              input.forEach(function(item, pos) {
              let sItem = item.outerHTML; // Convert DOM element to string

              // If output array doesn't contain input string...
              if(output.indexOf(sItem) == -1){
              output.push(sItem); // Add it to the output array
              }
              });

              // Replace the select with the output
              document.getElementById("cart").innerHTML = output.join("");

              <select id="cart" name="cart" multiple>
              <option value="4.00">Green Beans</option>
              <option value="4.00">Green Beans</option>
              <option value="4.00">Green Beans</option>
              <option value="6.00">Blue Beans</option>
              <option value="7.00">Black Beans</option>
              <option value="7.00">Black Beans</option>
              </select>








              share|improve this answer




























                0














                See comments inline below, but be warned that your existing HTML is invalid because there is no such attribute as price and with a select, you should have closing option tags and the option elements should contain the default text to display.




                // Convert initial options to an array
                let input =
                Array.prototype.slice.call(document.querySelectorAll("#cart > option"));

                let output = ; // Prepare final array

                // Loop over initial array
                input.forEach(function(item, pos) {
                let sItem = item.outerHTML; // Convert DOM element to string

                // If output array doesn't contain input string...
                if(output.indexOf(sItem) == -1){
                output.push(sItem); // Add it to the output array
                }
                });

                // Replace the select with the output
                document.getElementById("cart").innerHTML = output.join("");

                <select id="cart" name="cart" multiple>
                <option value="4.00">Green Beans</option>
                <option value="4.00">Green Beans</option>
                <option value="4.00">Green Beans</option>
                <option value="6.00">Blue Beans</option>
                <option value="7.00">Black Beans</option>
                <option value="7.00">Black Beans</option>
                </select>








                share|improve this answer


























                  0












                  0








                  0







                  See comments inline below, but be warned that your existing HTML is invalid because there is no such attribute as price and with a select, you should have closing option tags and the option elements should contain the default text to display.




                  // Convert initial options to an array
                  let input =
                  Array.prototype.slice.call(document.querySelectorAll("#cart > option"));

                  let output = ; // Prepare final array

                  // Loop over initial array
                  input.forEach(function(item, pos) {
                  let sItem = item.outerHTML; // Convert DOM element to string

                  // If output array doesn't contain input string...
                  if(output.indexOf(sItem) == -1){
                  output.push(sItem); // Add it to the output array
                  }
                  });

                  // Replace the select with the output
                  document.getElementById("cart").innerHTML = output.join("");

                  <select id="cart" name="cart" multiple>
                  <option value="4.00">Green Beans</option>
                  <option value="4.00">Green Beans</option>
                  <option value="4.00">Green Beans</option>
                  <option value="6.00">Blue Beans</option>
                  <option value="7.00">Black Beans</option>
                  <option value="7.00">Black Beans</option>
                  </select>








                  share|improve this answer













                  See comments inline below, but be warned that your existing HTML is invalid because there is no such attribute as price and with a select, you should have closing option tags and the option elements should contain the default text to display.




                  // Convert initial options to an array
                  let input =
                  Array.prototype.slice.call(document.querySelectorAll("#cart > option"));

                  let output = ; // Prepare final array

                  // Loop over initial array
                  input.forEach(function(item, pos) {
                  let sItem = item.outerHTML; // Convert DOM element to string

                  // If output array doesn't contain input string...
                  if(output.indexOf(sItem) == -1){
                  output.push(sItem); // Add it to the output array
                  }
                  });

                  // Replace the select with the output
                  document.getElementById("cart").innerHTML = output.join("");

                  <select id="cart" name="cart" multiple>
                  <option value="4.00">Green Beans</option>
                  <option value="4.00">Green Beans</option>
                  <option value="4.00">Green Beans</option>
                  <option value="6.00">Blue Beans</option>
                  <option value="7.00">Black Beans</option>
                  <option value="7.00">Black Beans</option>
                  </select>








                  // Convert initial options to an array
                  let input =
                  Array.prototype.slice.call(document.querySelectorAll("#cart > option"));

                  let output = ; // Prepare final array

                  // Loop over initial array
                  input.forEach(function(item, pos) {
                  let sItem = item.outerHTML; // Convert DOM element to string

                  // If output array doesn't contain input string...
                  if(output.indexOf(sItem) == -1){
                  output.push(sItem); // Add it to the output array
                  }
                  });

                  // Replace the select with the output
                  document.getElementById("cart").innerHTML = output.join("");

                  <select id="cart" name="cart" multiple>
                  <option value="4.00">Green Beans</option>
                  <option value="4.00">Green Beans</option>
                  <option value="4.00">Green Beans</option>
                  <option value="6.00">Blue Beans</option>
                  <option value="7.00">Black Beans</option>
                  <option value="7.00">Black Beans</option>
                  </select>





                  // Convert initial options to an array
                  let input =
                  Array.prototype.slice.call(document.querySelectorAll("#cart > option"));

                  let output = ; // Prepare final array

                  // Loop over initial array
                  input.forEach(function(item, pos) {
                  let sItem = item.outerHTML; // Convert DOM element to string

                  // If output array doesn't contain input string...
                  if(output.indexOf(sItem) == -1){
                  output.push(sItem); // Add it to the output array
                  }
                  });

                  // Replace the select with the output
                  document.getElementById("cart").innerHTML = output.join("");

                  <select id="cart" name="cart" multiple>
                  <option value="4.00">Green Beans</option>
                  <option value="4.00">Green Beans</option>
                  <option value="4.00">Green Beans</option>
                  <option value="6.00">Blue Beans</option>
                  <option value="7.00">Black Beans</option>
                  <option value="7.00">Black Beans</option>
                  </select>






                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Nov 24 '18 at 16:54









                  Scott MarcusScott Marcus

                  39.4k52037




                  39.4k52037






























                      draft saved

                      draft discarded




















































                      Thanks for contributing an answer to Stack Overflow!


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid



                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.


                      To learn more, see our tips on writing great answers.




                      draft saved


                      draft discarded














                      StackExchange.ready(
                      function () {
                      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53459996%2fgroup-option-items-javascript%23new-answer', 'question_page');
                      }
                      );

                      Post as a guest















                      Required, but never shown





















































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown

































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown







                      Popular posts from this blog

                      Costa Masnaga

                      Fotorealismo

                      Sidney Franklin