CODEWITHSUNDEEP
javascriptjqueryarrayssplitattributes
Boris
Boris

Reputation: 159

Take HTML of selects & options and only add numbers that follow a comma as an attribute to that select/option

First snippet is how it is now.

The second snippet is the result I'd like.

  1. Take the HTML code of i.e. 1,2,3, and add it as data="1,2,3" inside the select
  2. Take the HTML code i.e. 1,2,3, and add it as data="1,2,3" to the parent class called "option"

This is all in order for me to introduce more rules that govern which selects and options show or are hidden depending on what users select.

<div class="option">
   <label for="" class="control-label fs-16">One Thing or One Thing Plus Accessory:</label>
   <input type="hidden" name="b-BENTO8-option_610596" value="0">
   <div class="row">
      <div class="col-sm-8 col-md-7 col-lg-6">
         <select class="form-control" name="b-BENTO8-option_values_610596_0" onchange="showAttachmentInput('0', this.value)" id="PRODUCT-610596-0">
            <option class="opt" value="0" id="OPTION-610596-0-0-0">
               No
            </option>
            <option class="opt" value="1" id="OPTION-610596-0-0-1">1, One Thing  	            	              	               +   	                	              	            $5.15</option>
            <option class="opt" value="2" id="OPTION-610596-0-0-2">1, One Thing  	            	              	               +   	                	              	            $4.15</option>
            <option class="opt" value="3" id="OPTION-610596-0-0-3">1, One Thing  	            	              	               +   	                	              	            $3.15</option>
            <option class="opt" value="4" id="OPTION-610596-0-0-4">1, One Thing  	            	              	               +   	                	              	            $2.15</option>
            <option class="opt" value="5" id="OPTION-610596-0-0-5">1, One Thing  	            	              	               +   	                	              	            $1.15</option>
            <option class="opt" value="6" id="OPTION-610596-0-0-6">2, One Thing Plus Accessory  	            	              	               +   	                	              	            $6.75</option>
            <option class="opt" value="7" id="OPTION-610596-0-0-7">2, One Thing Plus Accessory  	            	              	               +   	                	              	            $5.75</option>
            <option class="opt" value="8" id="OPTION-610596-0-0-8">2, One Thing Plus Accessory  	            	              	               +   	                	              	            $4.75</option>
            <option class="opt" value="9" id="OPTION-610596-0-0-9">2, One Thing Plus Accessory  	            	              	               +   	                	              	            $3.75</option>
            <option class="opt" value="10" id="OPTION-610596-0-0-10">2, One Thing Plus Accessory  	            	              	               +   	                	              	            $2.75</option>
         </select>
      </div>
   </div>
</div>
<div class="option">
   <label for="" class="control-label fs-16">1,4,5, 1 Color Choice:</label>
   <input type="hidden" name="b-BENTO8-option_610596" value="7">
   <div class="row">
      <div class="col-sm-8 col-md-7 col-lg-6">
         <select class="form-control" name="b-BENTO8-option_values_610596_7" onchange="showAttachmentInput('7', this.value)" id="PRODUCT-610596-7">
            <option class="opt" value="0" id="OPTION-610596-7-7-0">1,4,5, Blue</option>
            <option class="opt" value="1" id="OPTION-610596-7-7-1">1,4,5, Green</option>
            <option class="opt" value="2" id="OPTION-610596-7-7-2">1,4,5, Yellow</option>
            <option class="opt" value="3" id="OPTION-610596-7-7-3">1,4,5, Red</option>
         </select>
      </div>
   </div>
</div>
<div class="option">
   <label for="" class="control-label fs-16">3,4, Optional Inside Label Setup Charge:</label>
   <input type="hidden" name="b-BENTO8-option_610596" value="4">
   <div class="row">
      <div class="col-sm-8 col-md-7 col-lg-6">
         <select class="form-control" name="b-BENTO8-option_values_610596_4" onchange="showAttachmentInput('4', this.value)" id="PRODUCT-610596-4">
            <option class="opt" value="0" id="OPTION-610596-4-4-0">3,4,  	            	              	               +   	                	              	            $50.00</option>
            <option class="opt" value="1" id="OPTION-610596-4-4-1">3,4,  	            	              	               +   	                	              	            $40.00</option>
            <option class="opt" value="2" id="OPTION-610596-4-4-2">3,4,  	            	              	               +   	                	              	            $30.00</option>
            <option class="opt" value="3" id="OPTION-610596-4-4-3">3,4,  	            	              	               +   	                	              	            $20.00</option>
            <option class="opt" value="4" id="OPTION-610596-4-4-4">3,4,  	            	              	               +   	                	              	            $10.00</option>
         </select>
      </div>
   </div>
</div>

<div class="option">
   <label for="" class="control-label fs-16">One Thing or One Thing Plus Accessory:</label>
   <input type="hidden" name="b-BENTO8-option_610596" value="0">
   <div class="row">
      <div class="col-sm-8 col-md-7 col-lg-6">
         <select class="form-control" name="b-BENTO8-option_values_610596_0" onchange="showAttachmentInput('0', this.value)" id="PRODUCT-610596-0">
            <option class="opt" value="0" id="OPTION-610596-0-0-0">
               No
            </option>
            <option class="opt" value="1" id="OPTION-610596-0-0-1" data="1">One Thing  	            	              	               +   	                	              	            $5.15</option>
            <option class="opt" value="2" id="OPTION-610596-0-0-2" data="1">One Thing  	            	              	               +   	                	              	            $4.15</option>
            <option class="opt" value="3" id="OPTION-610596-0-0-3" data="1">One Thing  	            	              	               +   	                	              	            $3.15</option>
            <option class="opt" value="4" id="OPTION-610596-0-0-4" data="1">One Thing  	            	              	               +   	                	              	            $2.15</option>
            <option class="opt" value="5" id="OPTION-610596-0-0-5" data="1">One Thing  	            	              	               +   	                	              	            $1.15</option>
            <option class="opt" value="6" id="OPTION-610596-0-0-6" data="2">One Thing Plus Accessory  	            	              	               +   	                	              	            $6.75</option>
            <option class="opt" value="7" id="OPTION-610596-0-0-7" data="2">One Thing Plus Accessory  	            	              	               +   	                	              	            $5.75</option>
            <option class="opt" value="8" id="OPTION-610596-0-0-8" data="2">One Thing Plus Accessory  	            	              	               +   	                	              	            $4.75</option>
            <option class="opt" value="9" id="OPTION-610596-0-0-9" data="2">One Thing Plus Accessory  	            	              	               +   	                	              	            $3.75</option>
            <option class="opt" value="10" id="OPTION-610596-0-0-10" data="2">One Thing Plus Accessory  	            	              	               +   	                	              	            $2.75</option>
         </select>
      </div>
   </div>
</div>
<div class="option" data="1,4,5">
   <label for="" class="control-label fs-16">1 Color Choice:</label>
   <input type="hidden" name="b-BENTO8-option_610596" value="7">
   <div class="row">
      <div class="col-sm-8 col-md-7 col-lg-6">
         <select class="form-control" name="b-BENTO8-option_values_610596_7" onchange="showAttachmentInput('7', this.value)" id="PRODUCT-610596-7">
            <option class="opt" value="0" id="OPTION-610596-7-7-0" data="1,4,5">Blue</option>
            <option class="opt" value="1" id="OPTION-610596-7-7-1" data="1,4,5">Green</option>
            <option class="opt" value="2" id="OPTION-610596-7-7-2" data="1,4,5">Yellow</option>
            <option class="opt" value="3" id="OPTION-610596-7-7-3" data="1,4,5">Red</option>
         </select>
      </div>
   </div>
</div>
<div class="option" data="3,4">
   <label for="" class="control-label fs-16"> Optional Inside Label Setup Charge:</label>
   <input type="hidden" name="b-BENTO8-option_610596" value="4">
   <div class="row">
      <div class="col-sm-8 col-md-7 col-lg-6">
         <select class="form-control" name="b-BENTO8-option_values_610596_4" onchange="showAttachmentInput('4', this.value)" id="PRODUCT-610596-4">
            <option class="opt" value="0" id="OPTION-610596-4-4-0" data="3,4">  	            	              	               +   	                	              	            $50.00</option>
            <option class="opt" value="1" id="OPTION-610596-4-4-1" data="3,4">  	            	              	               +   	                	              	            $40.00</option>
            <option class="opt" value="2" id="OPTION-610596-4-4-2" data="3,4">  	            	              	               +   	                	              	            $30.00</option>
            <option class="opt" value="3" id="OPTION-610596-4-4-3"  	            	              	               +   	                	              	            $20.00</option>
            <option class="opt" value="4" id="OPTION-610596-4-4-4" data="3,4">  	            	              	               +   	                	              	            $10.00</option>
         </select>
      </div>
   </div>
</div>

var test1 = ($('select').html()).match(/[^\d]+|\d+/g) & ($('select option').html()).match(/[^\d]+|\d+/g);

var test2 = test1.filter(function(el) {
 return !isNaN(parseFloat(el)) && isFinite(el);
});

I'm unsure how to stop parsing at the comma and att attribute to the corresponding parent of select and option.

Figured out the how to add the 1,2,3, to the ".option" from the label text.

$(".option > label").each(function() {
    var s = $(this).text();
    var pos = s.lastIndexOf(',');
    var newchar = s.substring(0,pos);
    $(this).parent().attr('test',newchar);
});

Here's the how to add to the options

$("option").each(function() {
    var s = $(this).text();
    var pos = s.lastIndexOf(',');
    var newchar = s.substring(0,pos).trim();
    $(this).attr('test',newchar);
});

Upvotes: 0

Views: 41

Answers (1)

Boris
Boris

Reputation: 159

Figured out the how to add the 1,2,3, to the ".option" from the label text. EDIT: Just added the ability to remove the erroneous numbers from label text.

$(".option > label").each(function() {
var s = $(this).text();
var pos = s.lastIndexOf(',');
var newchar = s.substring(0,pos);
var arrVars = s.split(",");
var lastVar = arrVars.pop();
var restVar = arrVars.join(",");
$(this).parent().attr('test',newchar);
$(this).html(lastVar);
});

Here's the how to add to the options EDIT: Added remove for erroneous numbers.

$("option").each(function() {
var s = $(this).text();
var pos = s.lastIndexOf(',');
var newchar = s.substring(0,pos).trim();
var arrVars = s.split(",");
var lastVar = arrVars.pop();
var restVar = arrVars.join(",");
$(this).attr('test',newchar);
$(this).html(lastVar);
});

Upvotes: 1

Related Questions