我需要创建一个包含多个具有动态宽度功能的下拉菜单的网站。下拉菜单嵌套在大的文本体中，因此它们能够根据当前选中的项目改变宽度是很重要的。
这是我一直在使用的脚本。
<style>
:root {
--dynamic-size: 20px;
--arrow-size: 20px;
--select-size: calc(var(--dynamic-size) + var(--arrow-size));
}
.resizing-select {
width: var(--select-size);
}
.helper-element {
position: absolute;
top: 0;
left: -9999px;
}
</style>
<html>
<select id="resizing-select">
<option>All</option>
<option>books</option>
<option>audiobooks</option>
<option>Living and more</option>
</select>
<span class="helper-element" aria-hidden="true"></span>
<!-- Malfunctioning Dropdown -->
<select id="resizing-select2">
<option>All</option>
<option>books</option>
<option>audiobooks</option>
<option>Living and more</option>
</select>
<span class="helper-element" aria-hidden="true"></span>
<!-- -->
</html>
<script>
const resizingSelect = document.querySelector(".resizing-select");
const helperElement = document.querySelector(".helper-element");
resizingSelect.addEventListener("change", initResize);
function initResize(event) {
helperElement.innerHTML = event.target.querySelector(
"option:checked"
).innerText;
resize(helperElement.offsetWidth);
}
function resize(width) {
const root = document.documentElement;
root.style.setProperty("--dynamic-size", `${width}px`);
}
</script>
这是我试图解决的问题，但似乎无法解决:
<script>
const resizingSelect = document.querySelector(".resizing-select");
const helperElement = document.querySelector(".helper-element");
resizingSelect.addEventListener("change", initResize);
function initResize(event) {
helperElement.innerHTML = event.target.querySelector(
"option:checked"
).innerText;
resize(helperElement.offsetWidth);
}
function resize(width) {
const root = document.documentElement;
root.style.setProperty("--dynamic-size", `${width}px`);
}
</script>
引用:http://jsfiddle.net/o64pfvnL/
https://codepen.io/jfaehrmann/pen/ExjpVEE
我的主要问题是，下拉菜单没有唯一的ID来分配个人宽度。我对jQuery没有足够的信心来实现我想要的功能。我有一种感觉，我已经很接近了，但我很迷茫，不知道该怎么做。
所以，为了让事情更容易理解，我需要复习一些东西。
——如果你没有为每个下拉菜单都有唯一的ID，你可以简单地使用另一个元素(在你的代码中是helper)来区分下拉菜单。
——一旦你添加了帮助器，你就可以分配类()。下拉列表)，以触发更改方法。
——方法本身只是获取所选选项的内容，并将其分配给它的助手(它旁边的span)
——最后，该方法获取span的宽度并将其分配给select box。
我希望这对你有帮助。:)
/*----- Define 'on change' function -----*/
$(".dropdown").change(function () {
/*----- Assign selected value to its helper -----*/
$(this).next('.helper-element').html($(this).children('option:selected').val());
/*----- Get width of helper and assign it to select box ------*/
var caretWidth = 20;
$(this).css('width', ($(this).next('.helper-element').width() + caretWidth) + 'px');
});
/*----- On document load, do it for all selects ------*/
$(document).ready(function(){
/*------ Get all dropdowns into a variable on page load -----*/
var dropdowns = $('.dropdown');
/*----- If there is one or more dropdown(s), loop over them */
if(dropdowns.length > 0){
$.each(dropdowns, function(i, item){
/*----- Do the same trick in here ------*/
$(item).next('.helper-element').html($(item).children('option:selected').val());
var caretWidth = 20;
$(item).css('width', ($(item).next('.helper-element').width() + caretWidth) + 'px');
});
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="resizing_select" class='dropdown'>
<option>Longer</option>
<option>All</option>
<option>A very very long string...</option>
</select>
<span class="helper-element" aria-hidden="true" style='display:none;'></span>
<select id="resizing_select" class='dropdown'>
<option>All</option>
<option>Longer</option>
<option>A very very long string...</option>
</select>
<span class="helper-element" aria-hidden="true" style='display:none;'></span>这里是前一个答案的优化版本
$(function() {
var $select = $('.dropdown');
var $helper = $('.helper-element');
$select.change(function() {
$helper.html($(this).children('option:selected').val());
$(this).css('width', ($helper.width() + 20) + 'px');
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="resizing_select" class='dropdown'>
<option>All</option>
<option>Longer</option>
<option>A very very long string...</option>
</select>
<span class="helper-element" aria-hidden="true" style='display:none;'></span>
<select id="resizing_select" class='dropdown'>
<option>All</option>
<option>Longer</option>
<option>A very very long string...</option>
</select>
<span class="helper-element" aria-hidden="true" style='display:none;'></span>