是否可以创建自定义对象来替代 HTML select？

Question

我对 Javascript 有点陌生，我想知道是否可以创建一个自定义的 3 列 <div> 或另一个对象来替换我的 <option> =21=] 菜单如下图所示。我想要一张图片、选项的名称，然后是 ID 等其他详细信息。这可能吗？

我知道我可以使用 Jquery 的 select2 来获得图像和字符串，但我不太确定从哪里开始获取第三列。

Answer 1

希望这对某人有所帮助，欢迎任何批评。这是完整的代码，然后我将把它分成几个部分。

<!DOCTYPE html>
<html>
  <head>

  <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>

        .col{
          display: flex;
          flex-direction: column;
        }
        .col20{
          text-align: center;
          flex: 20%;
          margin: auto;
          display: flex;
          flex-direction: column;
          padding: 5px 0px;
        }
        .col40{
          text-align: center;
          flex: 40%;
          margin: auto;
          display: flex;
          flex-direction: column;
          padding: 5px 0px;
        }
        .leftCol{
            text-align: center;
            padding-right: 10px;
            flex: 25%;
            display: flex;
            flex-direction: column;
            }
        .rightCol{
            background-color: white;
            text-align: center;
            flex: 75%;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            }
        .row {
          display: flex;
          flex-wrap: nowrap;
          margin: 0;
          /* flex-grow: 1; */
        }
        .selectableDiv{
            border:1px solid black ;
            background-color:white;
        }
        .selectableDiv:not(:last-child){
            border-bottom: 0px;
        }
        .activeDiv, .selectableDiv:hover {
            background-color: lightblue;
        }
    </style>
</head>

<body >
  <div class="row" style="padding-bottom: 5%;">
    <div class="leftCol" style="text-align: center;" >
        <div class="row selectableDiv">
            <div class="col20">Picture</div>
            <div class="col40">Name</div>
            <div class="col20">ID</div>
        </div>
        <div class="row selectableDiv">
            <div class="col20"><img src="https://fakeimg.pl/75x75/?text=Image1" style=" margin: auto;"></div>
            <div class="col40">John</div>
            <div class="col20">52343</div>
        </div>
        <div class="row selectableDiv">
            <div class="col20"><img src="https://fakeimg.pl/75x75/?text=Image2" style="margin: auto;"></div>
            <div class="col40">Jane</div>
            <div class="col20">12345</div>
        </div>
    </div>
    <div class="rightCol">
    </div>
  </div>

<script>
    var selectedDiv;
    var selectableDivs = document.getElementsByClassName("selectableDiv");

    var i;

    for (i = 0; i < selectableDivs.length; i++) {
        selectableDivs[i].addEventListener("click", function() {
            console.log("Click");
            //Toggle this specific div to be "activeDiv"
            this.classList.toggle("activeDiv");
            if (selectedDiv != null){
                selectedDiv.classList.remove("activeDiv"); //Remove activeDiv class from previous active div if exists
            }
            selectedDiv = this;                     // Set selectedDiv to this one
      });
    }

</script>

</body>
</html>

对于样式，我使用 flexbox 来创建列和行。我确信在造型方面还有改进的空间，因为我对 CSS 还是很陌生。我给了 div 一个我想成为选项的特殊选项 class 我称之为“selectableDiv”，带有黑色边框和白色背景。

.selectableDiv{
    border:1px solid black ;
    background-color:white;
    }

我为选定的 div 创建了另一个 CSS class，名为“activeDiv”。我给了它不同的背景颜色以及 selectableDiv 的悬停效果。

.activeDiv, .selectableDiv:hover {
    background-color: lightblue;
    }

然后使用 JavaScript 我初始化了一个变量 selectedDiv 作为我选择的 Dvi.got 所有具有 class “可选 div” 的元素 var selectableDivs = document.getElementsByClassName("selectableDiv");

然后我遍历每个可选 div 并分配一个点击事件侦听器，当点击时将为 clickedDiv 切换 activeDiv class。然后它将从任何先前的 selectedDiv（如果存在）中删除 activeDiv class，然后将变量 selectedDiv 分配给被单击的 div.

var i;

for (i = 0; i < selectableDivs.length; i++) {
    selectableDivs[i].addEventListener("click", function() {
        //Toggle this specific div to be "activeDiv"
        this.classList.toggle("activeDiv");
        if (selectedDiv != null){
            selectedDiv.classList.remove("activeDiv"); //Remove activeDiv class from previous active div if exists
        }
        selectedDiv = this;                     // Set selectedDiv to this one
      });
    }

是否可以创建自定义对象来替代 HTML select？

Is it possible to create a custom object as a replacement for a HTML select?

javascript

html

jquery

jquery-ui-selectmenu