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

我有多个选择菜单，我想为所有这些菜单添加相同的功能。我想根据选择下拉菜单是否处于活动状态来更改箭头位置。如果选择下拉菜单处于活动状态，则保留向下箭头，如果选择菜单处于活动状态，则将箭头更改为向上。为此，我有下面的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伪选择器，但是，这并不像我希望的那样工作。这样，箭头的方向只有在我点击选择菜单之外时才会改变。所以，最初它是向下的方向箭头，当点击选择菜单时，它被改变为向上方向，当再次点击时，箭头方向保持向上方向，即使下拉菜单不活动。我想这是有意义的，因为选择菜单仍然处于焦点状态。
选择菜单的css

.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>

这是我使用纯CSS/HTML所能得到的最接近的结果。我将select元素 Package 在一个 Package 器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>

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

2条答案

相关问题

热门标签

最新问答