Question

我希望我的选择框和选项下拉菜单的样式如下图所示。请同样帮我。如果只有CSS可以做到，那就太好了，否则，可以使用JavaScript解决方案。预先感谢。

我对Javascript和前端技术非常陌生。目前，以下代码用于选择框并获得其选项。

                        <div class="selectWrapper">
                                <label for="ext-comp-1001" class="inputLabel"><span class="required">*</span><fmt:message key="registration.country"/></label> 
                                <div class="x-form-element" id="x-form-el-ext-comp-1001">
                                    <input id="brand" name="spEntityID" type="hidden" value="<%=spEntityID%>" />
                                    <select autocomplete="off" id="ext-comp-1001" name="country" value="" class=" x-form-select-one x-form-field select_one select_one" onchange="changeStateList()"></select>
                                </div>
                            </div>

在上面的代码中，一些Javascript代码带到所有国家/地区，并且所有Javascript代码均以十六进制（UTF-8）编写。我能否在不触及难以解密和实现所有功能的现有Javascript代码的情况下实现这一目标。

Answer 1

要完成任务，您需要一些JavaScript以及一点点CSS。

我为您准备了一个演示，因此即使它确实包含您想要的所有功能，您也可以在上面进行演示（我的意思是，您可能不会像我为您所做的那样添加那么多的东西）。

那么，我们将如何进行：

首先，我们将像往常一样准备HTML（尤其是select元素），并添加另一个将托管新元素或custom select的元素具有：
- 用于显示所选option的文本的元素。
- 表示右侧箭头的元素（与出现在问题中的图像一样）。
- 用于包裹option的元素（JavaScript将填充该元素，并相应地更改所选元素的文本）。
根据“真实” select选项填充自定义select。
用custom select用选定的option更改JavaScript文本。

下一个示例说明了正在说的内容，还提供了一些有用的注释：

/** select the elements that are going to build the main functionalities of this task **/
const select = document.getElementById("select-box"),
  realOptions = select.options,
  customSelect = document.getElementById("custom-select"),
  selectedText = customSelect.querySelector(".selected-option-text"),
  optionsContainer = customSelect.querySelector(".options-container");
let idx = 0; /** this will help us get the correct index of the option when assigning the click event listener to the newly added custom options **/

/** add click listener to the custom "select" to open the custom options container **/
customSelect.addEventListener("click", () =>
  optionsContainer.classList.add("visible")
);


/** looping through the "option" elements of the real "select" **/
[...realOptions].forEach(el => {
  let currIdx = idx++; /** that will help us change the selected "option" on the real "select" eleement **/
  /** if the current real "option" is not disabled we add a custom one (in the custom "select") **/
  if (el.disabled === false) {
    /** create a new "p" element that will act as an "option" **/
    const customOption = document.createElement("p");
    customOption.classList.add("custom-option");
    /** the text of the "p" element is the same as the current (we're in a loop !) real "option" element **/
    customOption.textContent = el.textContent;
    /** add click listener to the "p" element that handles the click on a custom option which is the "p" element **/
    customOption.addEventListener("click", e => {
      /** the event doesn't propagate to the parent element to prevent the custom "select" from staying opened always (remember the click listener above for the parent (the custom "select")) **/
      e.stopPropagation();
      optionsContainer.classList.remove("visible");
      realOptions.selectedIndex = currIdx;
      selectedText.textContent = el.textContent;
    });
    /** add the "p" element which acts as an "option" to the custom "select" **/
    optionsContainer.append(customOption);
  }
});

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/** for demo purposes **/
select#select-box {
  display: block;
  margin-bottom: 25px;
}

.custom-select {
  position: relative;
  max-width: 50%; /** changes this per your requirements it's not that necessary **/
  padding-right: 10px;
  border: 2px solid #595859;
  border-radius: 6px;
  cursor: pointer;
}

.custom-select .arrows {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translate3d(0, -50%, 0);
  font-size: 0.75rem;
}

.custom-select .arrows>.fa {
  display: inline-block;
  vertical-align: middle;
}

.custom-select .selected-option-text {
  padding: 8px 6px;
  color: #595859;
  font-weight: bold;
}

.custom-select .options-container {
  display: none;
  position: absolute;
  width: 98%;
  max-height: 250px;
  top: 8px;
  left: 0;
  right: 0;
  margin: auto;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #595859;
  color: #f5f5f5;
  border-radius: 4px;
}

.custom-select .options-container.visible {
  display: block;
}

.custom-select .options-container>.custom-option {
  padding: 4px;
  cursor: default;
  transition: all .2s 0s ease;
}

.custom-select .options-container>.custom-option:hover {
  background-color: #ca2128;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" />
<select id="select-box">
  <option value="" disabled selected>select option</option>
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
  <option value="4">option 4</option>
  <option value="5">option 5</option>
  <option value="6">option 6</option>
  <option value="7">option 7</option>
  <option value="8">option 8</option>
  <option value="9">option 9</option>
  <option value="10">option 10</option>
</select>

<!-- nothing too fancy here just the "#custom-select" elemnt that will contain the custom select -->
<div id="custom-select" class="custom-select">
  <div class="selected-option-text">Please select an option</div>
  <div class="arrows">
    <i class="fa fa-sort"></i>
  </div>
  <div class="options-container"></div>
</div>

您可以自定义该示例，以更好地实现所需的最终结果。

我也没有隐藏真实的select，因此您可以看到它根据在自定义变量上选择的选项而变化。

我在这里是您想要的任何说明。

希望我进一步推动了你。

选择下拉菜单并设置其样式

1 个答案: