打开时选择带有图标和文本的选项，折叠时仅带有图标

Question

我想在我的本地网络上创建一个选择选项输入，在打开或单击时带有图标和文本，并在折叠时恢复为图标。我是否必须使用 js、css 或一些小插件都没关系。那可能吗？请告诉我怎么做

<div class="form-group mb-3">
  <div class="input-group">
    <select class="select2" id="pilihan" name="medsos" style="width: 73px;" onchange="chg_kontak()">
      <option selected disabled value="medsos"></option>
      <option value="email">Email</option><!-- this is the main problem, I want text with uppercase (Signal, WhatsApp, etc) hidden when select collapsed -->
      <option value="signal">Signal</option>
      <option value="telegram">Telegram</option>
      <option value="twitter">Twitter</option>
      <option value="whatsapp">WhatsApp</option>
    </select>
    <input type="text" class="form-control" id="oth_contact" name="oth_contact" placeholder="kontak lain" required disabled onfocus>
  </div>
</div>

<script>
//Initialize Select2 Elements
$('.select2').select2()

$(document).on('select2:open', () => {
  document.querySelector('.select2-search__field').focus();
});

function chg_kontak() {
  var x = document.getElementById("pilihan").value;
  var y = document.getElementById("oth_contact");
  if (x == "telegram" | x == "twitter") {
    y.type = "text";
    y.placeholder = "@username_anda";
    y.onfocus = function(){
      y.value = '@';
    }
  }else if (x == "whatsapp" | x == "signal"){
    y.type = "tel";
    // y.maxlength = "14";
    y.placeholder = "nomor "+x;
    y.value = '';
    y.onfocus = function(){
      y.value = '';
    }
  }else if (x == "email"){
    y.type = x;
    y.placeholder = "alamat email";
    y.value = '';
    y.onfocus = function(){
      y.value = '';
    }
  }
  y.removeAttribute("disabled");
}

$("#pilihan").select2({
    templateResult: function (idioma) {
    var $span = $("<span><img src='"+window.location.origin+"/jala/aset/mycustom/img/icons/"+idioma.id+".svg' style='width: 27px; padding-bottom: 2px;' /> " + idioma.text + "</span>");
    return $span;
  },
    templateSelection: function (idioma) {
    var $span = $("<span><img src='"+window.location.origin+"/jala/aset/mycustom/img/icons/"+idioma.id+".svg' style='width: 27px; padding-bottom: 2px;' /> " + idioma.text + "</span>");
    return $span;
  },
  minimumResultsForSearch: Infinity
  // placeholder: "<span><img src='"+window.location.origin+"/jala/aset/mycustom/img/email.png' height='27' /> dsafsak </span>" and I can't use my icon as placeholder too, but it's not a big problem
});
</script>

Answer 1

按照下面的操作很有帮助

<h1>Select</h1>
<input type="button" value="Show" onclick="ShowHideDiv(this)" />
<input type="button" value="Hide" onclick="ShowHideDiv(this)" />
<hr />
<div id="dvPassport" style="display: none">
    Name:
    <input type="text" id="" />
</div>

<script type="text/javascript">
    function ShowHideDiv(btnPassport) {
        var dvPassport = document.getElementById("dvPassport");
        dvPassport.style.display = btnPassport.value == "Show" ? "block" : "none";
    }
</script>