如何检测选择菜单何时与香草激活

Question

我有多个选择菜单，我想为它们添加相同的功能。我想根据选择下拉菜单是否激活来更改箭头位置。如果选择菜单未激活，则保持向下箭头，如果选择菜单激活，则将箭头更改为向上箭头。为此，我有下面的js代码，但是，它没有工作，我尝试使用active()方法，但是，得到了这个错误

Uncaught TypeError: selectMenus[i].active is not a function

下面是我试过的代码

const selectMenus = document.getElementsByClassName('select-menu');
for (let i = 0; i < selectMenus.length; i++) {
selectMenus[i].addEventListener("click", function (e) {
if (selectMenus[i].active()) {
console.log("yeeeee")
}
selectMenus[i].style.backgroundImage = `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a0aec0'%3e%3cpath d='M15.3 9.3a1 1 0 0 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4l3.3 3.29 3.3-3.3z'/%3e%3c/svg%3e")`;
});
}

现在，问题是，我如何根据选择菜单下拉的活动状态改变箭头的方向?在css中可以做到吗?我试图应用select-menu:focus伪选择器，但是，这并不工作的方式，我想要它的工作。这样，只有当我点击选择菜单的外部时，箭头的方向才会改变。所以，最初是向下方向的箭头，当点击选择菜单时，它变成向上方向，当再次点击时，箭头方向保持向上方向，即使下拉菜单没有活动。我想这是有道理的，因为选择菜单仍然处于焦点状态。

选择菜单

.select-menu {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a0aec0'%3e%3cpath d='M15.3 9.3a1 1 0 0 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4l3.3 3.29 3.3-3.3z'/%3e%3c/svg%3e");
}
.select-menu:focus {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-up" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/></svg>');
}

html

<select name="options[20][year]" id="options_20_year" class="select-menu product-custom-option admin__control-select datetime-picker mr-1 required last:mr-0" title="" data-role="calendar-dropdown" data-calendar-role="year" data-canvas-element="date_year" data-selector="options[20][year]" x-on:input="updateCertificateCanvas()" x-on:change="updateCustomOptionValue($dispatch, 'year', $event.target)" data-validate="{&quot;datetime-validation&quot;: true}">
<option value="">-</option><option value="1900">1900</option><option value="1901">1901</option><option value="1902">1902</option><option value="1903">1903</option><option value="1904">1904</option><option value="1905">1905</option><option value="1906">1906</option><option value="1907">1907</option><option value="1908">1908</option><option value="1909">1909</option><option value="1910">1910</option><option value="1911">1911</option><option value="1912">1912</option><option value="1913">1913</option><option value="1914">1914</option><option value="1915">1915</option><option value="1916">1916</option><option value="1917">1917</option><option value="1918">1918</option><option value="1919">1919</option><option value="1920">1920</option><option value="1921">1921</option><option value="1922">1922</option><option value="1923">1923</option><option value="1924">1924</option><option value="1925">1925</option><option value="1926">1926</option><option value="1927">1927</option><option value="1928">1928</option><option value="1929">1929</option><option value="1930">1930</option><option value="1931">1931</option><option value="1932">1932</option><option value="1933">1933</option><option value="1934">1934</option><option value="1935">1935</option><option value="1936">1936</option><option value="1937">1937</option><option value="1938">1938</option><option value="1939">1939</option><option value="1940">1940</option><option value="1941">1941</option><option value="1942">1942</option><option value="1943">1943</option><option value="1944">1944</option><option value="1945">1945</option><option value="1946">1946</option><option value="1947">1947</option><option value="1948">1948</option><option value="1949">1949</option><option value="1950">1950</option><option value="1951">1951</option><option value="1952">1952</option><option value="1953">1953</option><option value="1954">1954</option><option value="1955">1955</option><option value="1956">1956</option><option value="1957">1957</option><option value="1958">1958</option><option value="1959">1959</option><option value="1960">1960</option><option value="1961">1961</option><option value="1962">1962</option><option value="1963">1963</option><option value="1964">1964</option><option value="1965">1965</option><option value="1966">1966</option><option value="1967">1967</option><option value="1968">1968</option><option value="1969">1969</option><option value="1970">1970</option><option value="1971">1971</option><option value="1972">1972</option><option value="1973">1973</option><option value="1974">1974</option><option value="1975">1975</option><option value="1976">1976</option><option value="1977">1977</option><option value="1978">1978</option><option value="1979">1979</option><option value="1980">1980</option><option value="1981">1981</option><option value="1982">1982</option><option value="1983">1983</option><option value="1984">1984</option><option value="1985">1985</option><option value="1986">1986</option><option value="1987">1987</option><option value="1988">1988</option><option value="1989">1989</option><option value="1990">1990</option><option value="1991">1991</option><option value="1992">1992</option><option value="1993">1993</option><option value="1994">1994</option><option value="1995">1995</option><option value="1996">1996</option><option value="1997">1997</option><option value="1998">1998</option><option value="1999">1999</option><option value="2000">2000</option><option value="2001">2001</option><option value="2002">2002</option><option value="2003">2003</option><option value="2004">2004</option><option value="2005">2005</option><option value="2006">2006</option><option value="2007">2007</option><option value="2008">2008</option><option value="2009">2009</option><option value="2010">2010</option><option value="2011">2011</option><option value="2012">2012</option><option value="2013">2013</option><option value="2014">2014</option><option value="2015">2015</option><option value="2016">2016</option><option value="2017">2017</option><option value="2018">2018</option><option value="2019">2019</option><option value="2020">2020</option><option value="2021">2021</option><option value="2022" selected="selected">2022</option>
</select>
<select name="options[20][month]" id="options_20_month" class="select-menu product-custom-option admin__control-select datetime-picker mr-1 required last:mr-0" title="" data-role="calendar-dropdown" data-calendar-role="month" data-canvas-element="date_month" data-selector="options[20][month]" x-on:input="updateCertificateCanvas()" x-on:change="updateCustomOptionValue($dispatch, 'month', $event.target)" data-validate="{&quot;datetime-validation&quot;: true}">
<option value="">-</option><option value="1">Jan</option><option value="2">Feb</option><option value="3">Mar</option><option value="4">Apr</option><option value="5">May</option><option value="6">Jun</option><option value="7">Jul</option><option value="8">Aug</option><option value="9">Sep</option><option value="10">Oct</option><option value="11">Nov</option><option value="12" selected="selected">Dec</option>
</select>

Answer 1

添加一个focuseventListener来检查输入元素是否处于活动状态

select.addEventListener('focus', e=>{
console.log('is focused/active');
})

对于样式切换任务，您可以在选择一个选项后触发blur()事件。

let selects = document.querySelectorAll("select");
selects.forEach((select) => {
let hasFocus = false;
select.addEventListener("click", (e) => {
if (hasFocus) {
e.currentTarget.blur();
hasFocus = false;
} else {
hasFocus = true;
}
});
select.addEventListener("change", (e) => {
e.currentTarget.blur();
});
});

select {
appearance: none;
background: none;
width: 25%
}
.select-menu {
background-repeat: no-repeat;
background-position: right top;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a0aec0'%3e%3cpath d='M15.3 9.3a1 1 0 0 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4l3.3 3.29 3.3-3.3z'/%3e%3c/svg%3e");
}
.select-menu:focus {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-up" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/></svg>');
}

<select name="options[20][year]" id="options_20_year" class="select-menu product-custom-option admin__control-select datetime-picker mr-1 required last:mr-0" title="" data-role="calendar-dropdown" data-calendar-role="year" data-canvas-element="date_year"
data-selector="options[20][year]" x-on:input="updateCertificateCanvas()" x-on:change="updateCustomOptionValue($dispatch, 'year', $event.target)" data-validate="{&quot;datetime-validation&quot;: true}">
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022" selected="selected">2022</option>
</select>
<select name="options[20][month]" id="options_20_month" class="select-menu product-custom-option admin__control-select datetime-picker mr-1 required last:mr-0" title="" data-role="calendar-dropdown" data-calendar-role="month" data-canvas-element="date_month"
data-selector="options[20][month]" x-on:input="updateCertificateCanvas()" x-on:change="updateCustomOptionValue($dispatch, 'month', $event.target)" data-validate="{&quot;datetime-validation&quot;: true}">
<option value="">-</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12" selected="selected">Dec</option>
</select>

Answer 2

这是我使用纯CSS/HTML所能得到的最接近的效果。我将选择元素包装在包装器div中，并使用:focus-within伪选择器来查看底层按钮是否有焦点。唯一笨拙的一点是，如果你点击按钮关闭下拉箭头不会恢复到原来的状态。看看你觉得怎么样。我只是使用unicode字符的向上/向下箭头，但你可以很容易地替换为SVG或背景图像。

.select-container {
display:inline-block;
position:relative;
border:1px solid gray;
background-color:lightgray;
border-radius: 0.25rem;
}
.select-container::after {
content: "▲";
position: absolute;
display:grid;
place-items:center;
right:0;
top:0;
height:100%;
width:1rem;
background-color:lightgray;
pointer-events:none;
}
.select-container:focus-within::after {
content: "▼"
}
.select-container select {
background:none;
border:none;
}

<div class='select-container'><select name="options[20][year]" id="options_20_year" class="select-menu product-custom-option admin__control-select datetime-picker mr-1 required last:mr-0" title="" data-role="calendar-dropdown" data-calendar-role="year" data-canvas-element="date_year" data-selector="options[20][year]" x-on:input="updateCertificateCanvas()" x-on:change="updateCustomOptionValue($dispatch, 'year', $event.target)" data-validate="{&quot;datetime-validation&quot;: true}">
<option value="">-</option><option value="2018">2018</option><option value="2019">2019</option><option value="2020">2020</option><option value="2021">2021</option><option value="2022" selected="selected">2022</option>
</select>
</div>
<div class='select-container'>
<select name="options[20][month]" id="options_20_month" class="select-menu product-custom-option admin__control-select datetime-picker mr-1 required last:mr-0" title="" data-role="calendar-dropdown" data-calendar-role="month" data-canvas-element="date_month" data-selector="options[20][month]" x-on:input="updateCertificateCanvas()" x-on:change="updateCustomOptionValue($dispatch, 'month', $event.target)" data-validate="{&quot;datetime-validation&quot;: true}">
<option value="">-</option><option value="1">Jan</option><option value="2">Feb</option><option value="3">Mar</option><option value="4">Apr</option><option value="5">May</option><option value="6">Jun</option><option value="7">Jul</option><option value="8">Aug</option><option value="9">Sep</option><option value="10">Oct</option><option value="11">Nov</option><option value="12" selected="selected">Dec</option>
</select>
</div>