Question

我正在尝试将单个select元素拆分为多个select元素，分隔符为“/”

例如，这将是原始代码。

<select>
<option value="1234">Type 1 / Black</option>
<option value="5678">Type 2 / White</option>
</select>

对于这个例子，我需要以下结果。

<select>
<option value="12">Type 1</option>
<option value="56">Type 2</option>
</select>

<select>
<option value="34">Black</option>
<option value="78">White</option>
</select>

他们有独特的价值观，所以如果你看第一个，当你选择“类型1”和“黑色你得到的价值”1234“...希望这是有道理的...并举个例子，如果任何选项是相同的选项，如。

<select>
<option value="12">Type 1 / Black</option>
<option value="34">Type 1 / White</option>
</select>

我需要将这些联合组成一个选项元素，例如

<select>
<option value="12">Type 1</option>
</select>

<select>
<option value="12">Black</option>
<option value="34">White</option>
</select>

您之前是否已经完成了这项工作，或者有关此方法的最佳实践的想法？感谢对这些家伙的任何帮助！真的做！。

Answer 1

here is the Fiddle或this

          <select class='main-select'>
            <option value="1">Type 1 / Black</option>
            <option value="2">Type 1 / Yellow</option>
            <option value="3">Type 2 / White</option>
            <option value="4">Type 3 / Blue</option>
          </select>

JS

      $(document).ready(function(){
       var firstSelectItems=[],
           secondSelectItems=[],
           mainSelect=$('.main-select');

           mainSelect.find('option').each(function(index,item){
               var currentVal=item.text,
                   realCurrentValue=item.value,
                   splits=currentVal.split('/'),
                   former=splits[0],
                   last=splits[1];                                 
  addItem('<option value="'+realCurrentValue+'">'+former+'</option>',firstSelectItems);
   addItem('<option value="'+realCurrentValue+'">'+last+'</option>',secondSelectItems);
           });
          //mainSelect.remove();
          $('<select/>',{html:firstSelectItems.join('')}).insertAfter(mainSelect);
          $('<select/>',{html:secondSelectItems.join('')}).insertAfter(mainSelect);

      function addItem(_val, _array){
          for(var i=0;i< _array.length; i++){
          if( _array[i]==_val) return;
        }
        _array.push(_val);
      }
   });

Answer 2

你可以从这开始：

<!doctype html>
<html>
    <head>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
        <script>
            $(document).on('ready',function () {
                var categories = [];
                var categorySelect = $('<select class="category_select"></select>');
                var productSelect = $('<select class="product_select"></select>');
                var splitElement = $('.split_select option');

                $.each(splitElement, function(i) {
                    var elem = $(this);
                    var tempValue = elem.attr('value');
                    var catProduct = elem.text().split(' / ');
                    var tempCat = catProduct[0];
                    var tempProduct = catProduct[1];
                    if ( $.inArray(tempCat, categories)==-1 ) {
                        categories.push( tempCat );
                        categorySelect.append('<option value="' + tempValue + '">' + tempCat + '</option>');
                    };
                    productSelect.append('<option value="' + tempValue + '">' + tempProduct + '</option>');
                });

                $('.splited')
                    .append( categorySelect )
                    .append( productSelect );
            });
        </script>

    </head>
    <body>

        <select class="split_select">
            <option value="1">Category 1 / Black</option>
            <option value="2">Category 2 / White</option>
            <option value="3">Category 3 / Red</option>
            <option value="4">Category 3 / Blue</option>
            <option value="5">Category 3 / Yellow</option>
        </select>

        <div class="splited"></div>

    </body>

</html>

我看到你弄乱了上面的例子，但在这个基础上，你可以做任何你想做的事。

拆分选择元素

2 个答案: