<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>

#filter-radio li {
  display: none;
  cursor: pointer;
  padding: 5px 10px;
  border-top: 1px solid red;
  min-width: 0px;
  width: auto;
  margin-right: 20px;
}

#filter-radio li:first-child {
  display: block;
  border-top: 0px;
}

#filter-radio {
  border: 1px solid red;
  display: inline-block;
  padding: 0;
  border-radius: 4px;
  position: relative;
}

#filter-radio li:hover {
  background-color: #0f0;
}

#filter-radio li:first-child:hover {
  background-color: transparent;
}

#filter-radio.open li {
  display: block;
}

#filter-radio span:before {
  position: absolute;
  top: 5px;
  right: 15px;
  content: "2193";
}

#filter-radio.open span:before {
  content: "2191";
}

$("#filter-radio").click(function () {
  var is_open = $(this).hasClass("open");
  if (is_open) {
    $(this).removeClass("open");
  } else {
    $(this).addClass("open");
  }
});

$("#filter-radio li").click(function () {
  var selected_value = $(this).html();
  var first_li = $("#filter-radio li:first-child").html();

  $("#filter-radio li:first-child").html(selected_value);
  $(this).html(first_li);
});

$(document).mouseup(function (event) {
  var target = event.target;
  var select = $("#filter-radio");

  if (!select.is(target) && select.has(target).length === 0) {
    select.removeClass("open");
  }
});