javascript - 从选择控件 html 复制所选项目的文本

Question

我有一个带有预定义值的选择控件，我希望我的用户能够使用 CTRL + C 复制所选项目的文本

我不希望他们能够更改项目的文本(只需用鼠标/键盘选择它)

这是一个显示问题的 fiddle (我无法选择所选项目的文本)

http://jsfiddle.net/5C3Q9/1/

<select>
  <option value="orange">Orange</option>
  <option value="blue">Blue</option>
  <option value="red">Red</option>
  <option value="white">White</option>
</select>

不用JS我可以做到吗？ 如果不是，我该如何使用 jquery 做到这一点？

Answer 1

这是一种模仿您所追求的行为的方法，使用一点定位魔法和 jQuery。该代码仅在 Chrome 上进行了测试，因此可能需要进行一些调整才能在所有浏览器中显示良好。另请参阅页面底部 IE7 的注释

http://jsfiddle.net/FvFVJ/

html 相当简单。只需在您的选择旁边添加一个 input 字段并将两者包装在一个 div 中即可。您可以将属性 readonly 添加到输入字段，以根据需要禁用编辑

<小时/>

.wrap {
    position: relative;
    border: 1px solid #ccc;
    height: 21px;
    border-radius: 4px;
}

.wrap select {
    opacity: 0;
    position: absolute;
    top: -3px;
    left: -3px;
    z-index: 1;
}

.wrap input {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 2px;
    z-index: 2;
    border: 0;
}

.wrap:after{
    content: "\25BE";
    font-size: 1.5em;
    position: absolute;
    right: 0;
    top: -3px;
    z-index: 0;
}

两个元素都是包装器内的position:absolute。注意事项

1. select 元素的 opacity:0 使其不可见，但仍可点击
2. 伪元素.wrap:after，充当下拉箭头 (*)
3. z-index 排序，将输入放在选择的顶部，除了 Angular 点之外 它将充当下拉按钮
4. 需要正确固定宽度，无论是在 css(静态)还是通过 javascript(动态)中

<小时/>

$(function () {
    $(".wrap").width($(".wrap select").width());
    $(".wrap input").width($(".wrap select").width() - 20);
    $(".wrap select").on("change", function () {
        var txt = $(this).find(':checked').text();
        $(".wrap input").val(txt);
    });
});

最后是一些 javascript，用于为我们的元素设置正确的宽度，并在每次我们从选择中选择新值时更新输入文本。

<小时/>

(*) :伪元素在 IE7 或 .解决方法是为 .wrap 元素使用背景图像