CODEWITHSUNDEEP
javascriptjquery
Jack Johnson
Jack Johnson

Reputation: 611

Splitting a select element

I'm trying to split up a single select element into multiple select elements with the separator of "/"

For an example this would be the original code.

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

And for this example, i need the followin results.

<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>

They have unique values, so if you look at the first one, and when you select "Type 1" and "Black you get the value of "1234"... hope this makes sense... And for an example, if option if any of the options are the same such as.

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

I need those joint into a single option element such as

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

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

Have you done this before, or any ideas on best practise on this one ?. Appreciate any help on this guys!. Really do!.

Upvotes: 0

Views: 341

Answers (2)

Bellash
Bellash

Reputation: 8204

here is the Fiddle or 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>

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

Upvotes: 1

skobaljic
skobaljic

Reputation: 9644

You can start with this:

<!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>

I see you made mess with examples above, but on this base you can do whatever you want.

Upvotes: 0

Related Questions