[Solved] Detached <option> not reshowing with .append()

[computerbarry]

Hi all

I have detached an option (this week) from my select dropdown. Things are detached ok, but they are not being readded, not sure why? Any help thanks.

Snippet:

         else if( event.item.index === 0 || event.item.index === 4 ) {
            $('#select').css("display", "block");
            $('#select select#periodOption option[value=1]').append();
          }
          else if (event.item.index === 3) {
            $('#select').css("display", "block");
            $('#select select#periodOption option[value=1]').detach();
          }

Here is the example - JSFiddle
Use your mouse to slide the carousel. Slide 3 hides the option, but slide 0 and 4 don’t re add it

Thanks, Barry

[megazoid]

This line doesn’t append anything, because append() requires some content:

@computerbarry

$(‘#select select#periodOption option[value=1]’).append();

This is how you can add option to list:

$('<option/>').attr('value', 1).appendTo('select#periodOption');

Note that I’ve used appendTo() instead of append()

Also, you don’t need to use detach() to remove elements. There is remove() for that.

[computerbarry]

Thanks megazoid!

[quote=“megazoid, post:2, topic:202053”]
Also, you don’t need to use detach() to remove elements. There is remove() for that.
[/quote] Yes I did read about this, was a debate about using one or the other, I decided on detach, anyhow, good to know the different uses. best for the job

@megazoid

This is how you can add option to list:

$(‘<option/>’).attr(‘value’, 1).appendTo(‘select#periodOption’);

Cool, could you show example how this would fit together in the fiddle, little confusing?

Thanks, Barry

[megazoid]

@computerbarry

Cool, could you show example how this would fit together in the fiddle, little confusing?

Edit fiddle - JSFiddle - Code Playground

[computerbarry]

This is perfect!!! Thanks alot megazoid, works great, been at this for hours

Ok, one small issue, and not with your update, but with the another snippet of code I have for styling the dropdown.

The problem, I style the dropdown based on the selected item:

var select = $('select');
  select.each(function() {
          var firstSelectedText = $(this).find(':selected').text();
          $(this).wrap('<div class="selectWrapper"/>');
          selectWrapper = $(this).parent();
          customSelectCont = $('<span class="customSelectCont"/>').appendTo(selectWrapper);      
          customSelectCont.text(firstSelectedText);
          $(this).change(function() {
              var newOption = $(this).find('option:selected').text()
              $(this).next(customSelectCont).text(newOption);
        })                    
  });

So now, when we reach the third item, we are still seeing ‘this week’ though this is not hidden when showing month. Is there a easy fix so this function can relate to the previous snippet?

Updated Fiddle

Cheers, Barry

[megazoid]

Trigger change event each time when contents of your select is changed:

$('select#periodOption').change();

Edit fiddle - JSFiddle - Code Playground

[computerbarry]

Thanks for getting back megazoid, appreciate your knowledge.

Ok, taking shape, only now, if for example we don’t select any dropdown, but just move through the slides, once we hit slide 3 without week, showing month ok, but the other slides don’t default back to week text, still showing month. If that makes sense.

Can we somehow, make the slides with ‘week’ show as the first value past the 3 slide. If you slide through each you’ll see what I mean. Though if month or year has been selected, then nothing should change.

Barry

[megazoid]

Fixed http://jsfiddle.net/megazd/av0bkbzx/9/

[computerbarry]

Magic!!!
Advanced stuff, thank you working really good megazoid.

One final problem, maybe flourish would be a better word, not sure if I’ll use this option yet, though nice to have this at hand if needed.

Ok, if we select year in the first slide, week, or month, is it possible to carry this value over to the next slides? So each slide stays on the current selection until changed, excluding slide 3 which has no week, unless month or year is selected of course.

So instead of defaulting back to the first option on each slide, it remembers what was selected previous, and again, excluding slide 3 if week is selected.

Small update:
Do we still need the below snippet, doesn’t seem to be getting used?

var weekOption = $('#select select#periodOption option').first();

Thanks, Barry

[megazoid]

Here is it http://jsfiddle.net/megazd/av0bkbzx/12/

@computerbarry

Do we still need the below snippet, doesn’t seem to be getting used?

No, that line is not necessary

[computerbarry]

Thank you. Not quite sure what version 12 is doing, version 11 seems to be what I was talking about megazoid, works good, besides the small change when we hit the third slide if we have week selected. Think that’s unavoidable.

Example: If we select year on the first slide on version 11 and move across all slides, year is always selected. This is what I meant, works good.

Anyhow, lots of code and great examples here, thanks again! Really helped me, thanks.

Barry