Question

我有<select>动态生成的<option>字段。

<select>
    <option value=""></option>
    <option value=""></option>
    <option value=""> False</option>
    <option value=""> True</option>
    <option value="">False False</option>
    <option value="">False True</option>
    <option value="">True</option>
    <option value="">True True</option>
</select>

我想删除重复的事件和组合。带有<select>的最终<option>字段应如下所示：

<select>
    <option value=""></option>
    <option value="">False</option>
    <option value="">True</option>
</select>

以下是我的fiddle的样子。一直试图解决这个问题几个小时。

var values = [];

$("select").children().each(function() {
  if (values.length > 0) {
    var notExists = false;
    for (var x = 0; x < values.length; x++) {
      var _text = this.text.replace(/\s/g, "");
      var value = values[x].replace(/\s/g, "");

      if (values[x].length > _text.length) {
        //console.log('>>+', value, ' || ', _text, value.indexOf(_text))
        notExists = value.indexOf(_text) > -1 ? true : false;
      } else {
        //console.log('>>*', value, ' || ', _text, _text.indexOf(value))
        notExists = _text.indexOf(value) > -1 ? true : false;
      }
    }
    if (notExists) {
      //this.remove();
      values.push(this.text);
    }
  } else {
    values.push(this.text);
  }
});

任何帮助解决这个问题都表示赞赏。

Answer 1

您可以使用map()返回所有选项文本，并在空白处使用split()。然后，要删除重复项，您可以使用reduce()返回对象。然后，您可以清空select并使用Object.keys()循环每个媒体资源并附加到select。

var opt = $("select option").map(function() {
  return $(this).text().split(' ')
}).get();

opt = opt.reduce(function(o, e) {return o[e] = true, o}, {});

$('select').empty();
Object.keys(opt).forEach(function(key) {
  $('select').append(' <option value="">'+key+'</option>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value=""></option>
  <option value=""></option>
  <option value="">False</option>
  <option value="">True</option>
  <option value="">False False</option>
  <option value="">False True</option>
  <option value="">True</option>
  <option value="">True True</option>
</select>

Answer 2

您可以遍历每个子文字，然后使用substring获取第一个文字＆amp;把它放在一个数组中。

完成empty select元素并附加新创建的选项

var _textHolder=[]; // NA empty array to hold unique text
var _options="";
$("select").children().each(function(item,value) {
  var _textVal = $(this).text().trim(); // Remove white space
  //get the first text content
  var _getText = _textVal.substr(0, _textVal.indexOf(" "));
  // if this text is not present in array then push it   
  if(_textHolder.indexOf(_getText) ==-1){
       _textHolder.push(_getText)
      }
   });
   // Create new options with items from _textHolder
  _textHolder.forEach(function(item){
  _options+='<option value="">'+item+'</option>'
 })
// Empty current select element and append new options
   $('select').empty().append(_options);

JSFIDDLE

Answer 3

我会使用纯JS ES6风格。这是从空白分隔的选项元素的innerText值生成一个单词数组，无论单词是在前面，中间还是末尾;它将从中创建一个唯一的选项列表。基本上我们将这些数组连接在一起，并利用新的Set对象统一它们。代码如下;

＆＃13;

var opts = document.querySelector("select").children,
    list = Array.prototype.reduce.call(opts, function(s,c){
                                               text = c.innerText.trim().split(" ");
                                               return new Set([...s].concat(text)) // adding multiple elements to a set
                                             },new Set());
list = [...list];  // turn set to array
for (var i = opts.length-1; i >= 0; i--){ //reverse iteration not to effect indices when an element is deleted
  i in list ? opts[i].innerText = list[i]
            : opts[i].parentNode.removeChild(opts[i]);
}

＆＃13;

<select>
    <option value=""></option>
    <option value=""></option>
    <option value=""> False</option>
    <option value=""> True</option>
    <option value="">False False</option>
    <option value="">False True</option>
    <option value="">True</option>
    <option value="">True True</option>
</select>

＆＃13;

在html选项中删除重复的值和组合

3 个答案: