Not too sure if this question qualifies for SO, perhaps borderline. If it doesnt kindly inform me and I'll modify accordingly.

Ive searched every corner of the intraweb for a library or tutorial for the following, but simply cant find one.

Im trying to display a select box, which onclick moves half the options upwards and half the options downwards as in the image below:

Ive seen a javascript library where instead of the default option where the data in a select box gets displayed downwards -- it gets display upwards.

However I cant find anything to achieve the effect on above where half the data essentially gets displayed in an upwards direction and other half in a downward direction.

If anyone can provide some input it would be immensely appreciated.

Not too sure if this question qualifies for SO, perhaps borderline. If it doesnt kindly inform me and I'll modify accordingly.

Ive searched every corner of the intraweb for a library or tutorial for the following, but simply cant find one.

Im trying to display a select box, which onclick moves half the options upwards and half the options downwards as in the image below:

Ive seen a javascript library where instead of the default option where the data in a select box gets displayed downwards -- it gets display upwards.

However I cant find anything to achieve the effect on above where half the data essentially gets displayed in an upwards direction and other half in a downward direction.

If anyone can provide some input it would be immensely appreciated.

• javascript
• jquery
• html
• css

• Direction of the drop down also depends on the browser and available space. If the dropdown is near the bottom of the window, the drop down will open upwards. In IE10 or newer, it will try to keep the selected item in place, everything above will open upwards, everything below will open downwards. However, for the default HTML select element, there is no author control over this behaviour. – Lee Kowalkowski Commented Jan 17, 2018 at 14:06
• For a richer custom widget, I suspect the implementation is non-trivial and not the kind of thing there would be a tutorial for. If you tell us where that example is from, maybe somebody can inspect it to see if it uses a mon library or is custom built. – Lee Kowalkowski Commented Jan 17, 2018 at 14:10
• One thing is for sure, that's not really an HTML select, as their display direction depends on the browser, not much you can do there. So you need to fake it by other means. – Facundo Corradini Commented Jan 17, 2018 at 14:17
• @LeeKowalkowski I added a link to a page which uses this selectbox in question www.superbru. after you do a quick register & sign in you should see it. (I am in no way affiliated with the site above) – Marilee Commented Jan 17, 2018 at 14:30
• Hey @FacundoCorradini thank you for your ment I added the link of the website for user Facundo as he requested. If you want to have a peek at the source code see my ment above.I had a look and tried to figure it out but it is above my skill set unfortunately :( Thanks – Marilee Commented Jan 17, 2018 at 14:33

2 Answers 2

If a jump-appear solution (instead of animation) is an option, you can get away with pure CSS an no javascript at all.

HTML select direction can't be controlled as it's up to each browser, but you could use instead radio buttons and control related labels. Then it's just a matter of controlling the display of the labels on hover.

html{
  font-family:sans-serif;
  box-sizing:border-box;
}

input{
  display:none;
}
label{
  display:none;
  padding:1em;
  width: 300px;
}

input:checked + label{
  background:green;
  display:block;
}

#container{
  border:1px solid lightblue;
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%);
}

#container:hover{
  transform:translate(-50%, calc(-50% + 2em));
}

#container:hover label{
  cursor: pointer;
  display:block;
  border-bottom:1px solid lightblue;
}

<div id="container">
  <input type="radio" name="result" id="f2">
  <label for="f2"> France 2</label>
  <input type="radio" name="result" id="f1">
  <label for="f1"> France 1</label>
  <input type="radio" name="result" id="0" checked>
  <label for="0"> Draw</label>
  <input type="radio" name="result" id="i1">
  <label for="i1"> Ireland 1</label>
    <input type="radio" name="result" id="i2">
  <label for="i2"> Ireland 2</label>
</div>

Edit:

Apparently in my frenzy of "you can do that with pure CSS" I forgot it's 2018, and the above answer will only work for desktop and fail miserably on mobile, as it relies on :hover. So we need a little JS, just to toggle an ".active" class instead of the hovers.

var container = document.getElementById("container");
var labels = document.querySelectorAll("#container label")
for (i = 0; i < labels.length; i++) {
  (function(i) {
    labels[i].addEventListener('click', function() {
      container.classList.toggle("active");
    });
  })(i);
}

html{
  font-family:sans-serif;
  box-sizing:border-box;
}

input{
  display:none;
}
label{
  display:none;
  padding:1em;
  width: 300px;
}

input:checked + label{
  display:block;
  background-color:green;
  color:white;
}

#container{
  border:1px solid lightblue;
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%);
}

#container.active{
  transform:translate(-50%, calc(-50% + 2em));
}

#container.active label{
  display:block;
  border-bottom:1px solid lightblue;
}

#container label{
  cursor: pointer;
}

<div id="container">
  <input type="radio" name="result" id="f2">
  <label for="f2"> France 2</label>
  <input type="radio" name="result" id="f1">
  <label for="f1"> France 1</label>
  <input type="radio" name="result" id="0" checked>
  <label for="0"> Draw</label>
  <input type="radio" name="result" id="i1">
  <label for="i1"> Ireland 1</label>
    <input type="radio" name="result" id="i2">
  <label for="i2"> Ireland 2</label>
</div>

Got some issues there trying to apply the click event to the container instead of each individual label, so that JS can surely be improved... any help will be appreciated.

Alternatively, you can just use jQuery for that. Talkin 'bout "I forgot it's 2018"...

$('#container label').click(function() {
  $(this).parent().toggleClass('active')
});

Unless you can find a library which has this functionality built-in, you could resort to just manually change the position of the dropdown from pretty much any select library.

Here's a "simple" example using select2:

var disableSelection = false, selectionDisabledTimer;
$('#example').select2({ //#example is a select element
    minimumResultsForSearch: -1 //disable search
}).on('select2:open', function(){
    setTimeout(function(){
          var goUpBy = $('.select2-dropdown').height() / 2; //nr of px to move up
          $('.select2-dropdown')
            .removeClass('select2-dropdown--below') //remove style which hides upper border
            .css('marginTop', -goUpBy +'px');       //move dropdown up
    }, 0);
}).on('select2:opening', function(e){
    disableSelection = true;
    clearTimeout(selectionDisabledTimer);           //clear old timer (in case of multiple fast clicks)
    selectionDisabledTimer = setTimeout(function(){ //disable selection for 500ms
        disableSelection = false;
    }, 500);
}).on('select2:selecting', function(e){
    if(disableSelection){
        e.preventDefault();
    }
});

Demo: https://jsfiddle/981usa95/7/

Note: The code looks messy because I had to work around the issue where, because the dropdown is opened below the cursor, the option below the cursor is instantly selected. Cleaner solutions may exist.