如何使选定选项的宽度为当前选定选项的文本宽度?
How to make the Selected Option the width of the current Selected Option's text?
我正在尝试使 Select 选项具有当前 Selected 选项的宽度。
我的代码是 Select 选项下拉列表的标准 HTML:
<select name="search_options">
<option value="all">All</option>
<option value="entertainment">Entertainment</option>
<option value="newsandpolitics">News & Politics</option>
<option value="sports">Sports</option>
<option value="lifestyle">Lifestyle</option>
<option value="health">Health</option>
<option value="scienceandtech">Science & Tech</option>
</select>
我一直在尝试仅使用 CSS 或 Javascript,而没有使用 JQuery,但我无法弄清楚。
我已经找到了几个 JQuery 的小提琴,但是没有 CSS/Javascript 的。
有什么方法可以实现这一点,与上述 2 个小提琴相同,只使用 CSS 或纯 Javascript?
任何正确方向的指示都会很棒。
根据你的第二个 link 你可以这样做:
var selectId = document.getElementById("yourSelect");
selectId.onchange=function(){
var selectedValue = selectId.options[selectId.selectedIndex].value;
var selectedText = selectId.options[selectId.selectedIndex].text;
selectId.style.width = 20 + (selectedText.length * 8) + "px";
}
转换为 JavaScript 并解释您的第一个示例 (http://jsfiddle.net/5AANG/4/)。
这将创建一个临时 <span>
元素并将样式从 select 框中复制到跨度。然后它测量跨度的宽度,根据该宽度设置 select 框的宽度,并从文档中删除跨度。
老式 JavaScript:
抓住所有 <select>
s:
var selects = document.querySelectorAll('select');
将我们的事件侦听器(定义如下)添加到每个:
for (var i = 0; i < selects.length; i++) {
selects[i].addEventListener('change', changeWidth);
}
定义事件侦听器:
function changeWidth (e) {
基本变量定义:
var select = e.target;
var o = select.options[select.selectedIndex];
var s = document.createElement('span');
将我们的临时跨度 (s
) 的内容设置为 selected 选项的内容:
s.textContent = o.textContent;
有趣的部分!为 <span>
分配 selected 选项的样式。 (参见 getComputedStyle
)
var ostyles = getComputedStyle(o);
s.style.fontFamily = ostyles.fontFamily;
s.style.fontStyle = ostyles.fontStyle;
s.style.fontWeight = ostyles.fontWeight;
s.style.fontSize = ostyles.fontSize;
将 span 附加到文档,以便我们可以获取其宽度:
document.body.appendChild(s);
根据 span 的宽度设置 <select>
的宽度(30 是从上述 fiddle 中提取的幻数)。
select.style.width = (s.offsetWidth + 30) + 'px';
快!在任何人看到之前删除临时跨度!
document.body.removeChild(s);
}
我为另一个线程写了这个答案,这个线程刚刚作为这个线程的副本而关闭。这些答案的问题在于它们有点复杂并且使用 hard-coded 填充值,这可能不可靠。这是我的解决方案,不需要任何东西 hard-coded.
虽然没有 CSS 和 HTML 唯一的方法,但相当 straight-forward 的方法是创建一个隐藏的 select,设置它的唯一选择值的选项,然后采用该宽度并将其设置为可见 select。
虚拟 select 基本上只是一种可靠的测量宽度的方法。
把那个逻辑加到"change"应该就可以了,手动触发一次就可以了。
const select = document.querySelector('select');
select.addEventListener('change', function() {
const dummySelect = document.createElement('select');
dummySelect.classList.add('dummy');
const dummyOption = document.createElement('option');
dummyOption.innerHTML = this.value;
dummySelect.appendChild(dummyOption);
document.body.appendChild(dummySelect);
select.style.width = `${dummySelect.offsetWidth}px`;
document.body.removeChild(dummySelect);
});
// Trigger for the first time
select.dispatchEvent(new Event('change'));
select {
display: inline;
}
.dummy {
position: absolute;
left: -10000px;
}
<select>
<option>A</option>
<option>A much longer title</option>
<option>Middleground</option>
</select>
我正在尝试使 Select 选项具有当前 Selected 选项的宽度。
我的代码是 Select 选项下拉列表的标准 HTML:
<select name="search_options">
<option value="all">All</option>
<option value="entertainment">Entertainment</option>
<option value="newsandpolitics">News & Politics</option>
<option value="sports">Sports</option>
<option value="lifestyle">Lifestyle</option>
<option value="health">Health</option>
<option value="scienceandtech">Science & Tech</option>
</select>
我一直在尝试仅使用 CSS 或 Javascript,而没有使用 JQuery,但我无法弄清楚。
我已经找到了几个 JQuery 的小提琴,但是没有 CSS/Javascript 的。
有什么方法可以实现这一点,与上述 2 个小提琴相同,只使用 CSS 或纯 Javascript?
任何正确方向的指示都会很棒。
根据你的第二个 link 你可以这样做:
var selectId = document.getElementById("yourSelect");
selectId.onchange=function(){
var selectedValue = selectId.options[selectId.selectedIndex].value;
var selectedText = selectId.options[selectId.selectedIndex].text;
selectId.style.width = 20 + (selectedText.length * 8) + "px";
}
转换为 JavaScript 并解释您的第一个示例 (http://jsfiddle.net/5AANG/4/)。
这将创建一个临时 <span>
元素并将样式从 select 框中复制到跨度。然后它测量跨度的宽度,根据该宽度设置 select 框的宽度,并从文档中删除跨度。
老式 JavaScript:
抓住所有 <select>
s:
var selects = document.querySelectorAll('select');
将我们的事件侦听器(定义如下)添加到每个:
for (var i = 0; i < selects.length; i++) {
selects[i].addEventListener('change', changeWidth);
}
定义事件侦听器:
function changeWidth (e) {
基本变量定义:
var select = e.target;
var o = select.options[select.selectedIndex];
var s = document.createElement('span');
将我们的临时跨度 (s
) 的内容设置为 selected 选项的内容:
s.textContent = o.textContent;
有趣的部分!为 <span>
分配 selected 选项的样式。 (参见 getComputedStyle
)
var ostyles = getComputedStyle(o);
s.style.fontFamily = ostyles.fontFamily;
s.style.fontStyle = ostyles.fontStyle;
s.style.fontWeight = ostyles.fontWeight;
s.style.fontSize = ostyles.fontSize;
将 span 附加到文档,以便我们可以获取其宽度:
document.body.appendChild(s);
根据 span 的宽度设置 <select>
的宽度(30 是从上述 fiddle 中提取的幻数)。
select.style.width = (s.offsetWidth + 30) + 'px';
快!在任何人看到之前删除临时跨度!
document.body.removeChild(s);
}
我为另一个线程写了这个答案,这个线程刚刚作为这个线程的副本而关闭。这些答案的问题在于它们有点复杂并且使用 hard-coded 填充值,这可能不可靠。这是我的解决方案,不需要任何东西 hard-coded.
虽然没有 CSS 和 HTML 唯一的方法,但相当 straight-forward 的方法是创建一个隐藏的 select,设置它的唯一选择值的选项,然后采用该宽度并将其设置为可见 select。
虚拟 select 基本上只是一种可靠的测量宽度的方法。
把那个逻辑加到"change"应该就可以了,手动触发一次就可以了。
const select = document.querySelector('select');
select.addEventListener('change', function() {
const dummySelect = document.createElement('select');
dummySelect.classList.add('dummy');
const dummyOption = document.createElement('option');
dummyOption.innerHTML = this.value;
dummySelect.appendChild(dummyOption);
document.body.appendChild(dummySelect);
select.style.width = `${dummySelect.offsetWidth}px`;
document.body.removeChild(dummySelect);
});
// Trigger for the first time
select.dispatchEvent(new Event('change'));
select {
display: inline;
}
.dummy {
position: absolute;
left: -10000px;
}
<select>
<option>A</option>
<option>A much longer title</option>
<option>Middleground</option>
</select>