采用 HTML 的选择和选项，并且只添加逗号后面的数字作为该选择/选项的属性答案

【问题标题】：Take HTML of selects & options and only add numbers that follow a comma as an attribute to that select/option采用 HTML 的选择和选项，并且只添加逗号后面的数字作为该选择/选项的属性
【发布时间】：2018-12-01 06:12:59
【问题描述】：

第一个 sn-p 就是现在的样子。

第二个 sn-p 是我想要的结果。

取 HTML 代码即 1,2,3，并将其作为 data="1,2,3" 添加到 select 中
获取 HTML 代码，即 1,2,3，并将其作为 data="1,2,3" 添加到名为“option”的父类中

这一切都是为了让我引入更多规则，根据用户的选择来管理哪些选择和选项显示或隐藏。

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

我不确定如何在逗号和 att 属性处停止解析到 select 和 option 的相应父级。

想出了如何从标签文本中将 1、2、3 添加到“.option”。

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

这是添加到选项的方法

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

【问题讨论】：

@CertainPerformance，你能想出一个更好的方法来做我在回答中所做的事情吗？
您可以考虑使用正则表达式，RE 非常适合简洁的字符串匹配/操作：jsfiddle.net/3rgdL2o4 但您的方式也可以：)

标签： javascript jquery arrays split attributes

【解决方案1】：

想出了如何从标签文本中将 1、2、3 添加到“.option”。编辑：刚刚添加了从标签文本中删除错误数字的功能。

$(".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);
});

这是添加到选项的方法编辑：为错误的数字添加了删除。

$("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);
});

【讨论】：