jQuery addClass example

Change class name on click in jQuery

by Noir Noir

HTML

<div class="superspace"></div>
<div class="sector">
  <button>Выбрать тип</button>
  <span></span>
  <select size="5" id="selID" isClicked="false">
    <option value="A">AAA</option>
    <option value="B">BBB</option>
    <option value="C">CCC</option>
    <option value="D">DDD</option>
    <option value="E">EEE</option>
    <option value="F">FFF</option>
    <option value="G">GGG</option>
    <option value="H">HHH</option>
    <option value="I">IIII</option>
  </select>
</div>

CSS

Выпадающий список должен появляться под полем или над ним (в зависимости от расположения элемента на экране).Он всегда появляется снизу, даже если снизу экрана мало пространства. Как сделать это?

Это мой код:

$(document).ready(function(){

$("button").click(function() {
if ($('select').attr("isClicked") != "true") {
    $('select').css("display", "block").attr("isClicked", "true");
  }
});

$("select").click(function() {
      if ($('select').attr("isClicked") != "false") {
        $('span').html($('select').val());
        $('select').css("display", "none").attr("isClicked", "false");
      }
    });
    
});
div.sector {
  position: relative;
  width: 200px;
  height: 36px;
}

button {
  width: 50%;
  height: 100%;
}

span {
  width: 50%;
  height: 100%;
}

select {
  position: absolute;
  display: none;
}
.superspace {
  height: 500px;
}

JavaScript

$(document).ready(function(){

$("button").click(function() {
if ($('select').attr("isClicked") != "true") {
		var select = $('select'),
    		windowPosition = $(window).scrollTop() + $(window).height(),
        selectPosition = select.offset().top + select.height();
    console.log(windowPosition, selectPosition);
		if (windowPosition < selectPosition) {
    	select.insertBefore('button');
    }
    select.css("display", "block").attr("isClicked", "true");
  }
});

$("select").click(function() {
      if ($('select').attr("isClicked") != "false") {
        $('span').html($('select').val());
        $('select').css("display", "none").attr("isClicked", "false");
      }
    });
    
});