从选择控件html复制所选项目的文本 [英] Copy selected item's text from select control html

问题描述

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

I have a select control with pre defined values and I want my users to be able to copy the selected item's text with CTRL + C

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

I don't want them to be able to change the text of the item (just select it with the mouse/keyboard)

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

here is a fiddle that shows the problem (I can't select the text of the selected item)

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?

Can I do that without JS? if not how do i do that with jquery?

推荐答案

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

Here's a way to mimick the behaviour you are after, with a bit of positioning magic and jQuery. The code is only tested on Chrome, so it might need a bit of tweaking to look good in all browsers. Also see the note at the bottom of the page for IE7

http://jsfiddle.net/FvFVJ/

html非常简单.只需在您的选择旁边添加一个 input 字段，然后将它们都包装在div中即可.您可以将 readonly 属性添加到输入字段，以根据需要禁用编辑

The html is rather simple. Just add an input field next to your select and wrap both in a div. You can add the property readonly to the input field, to disable editing if you wish

.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 .注意事项

Both elements are position:absolute inside the wrapper. Things to notice

1. select 元素具有 opacity:0 ，使其不可见但仍可单击
2. 伪元素 .wrap:after ，用作下拉箭头(*)
3. z-index 排序，该命令将输入​​置于选择的顶部(期望的是角落)将用作下拉按钮
4. 宽度需要正确固定，无论是使用CSS(静态)还是使用javascript(动态)

1. The select element has opacity:0 which makes it invisible but still clickable
2. The pseudo element .wrap:after, which acts as a dropdown arrow (*)
3. The z-index ordering, which puts the input on top of the select, expect of the corner which will act as the dropdown button
4. The widths need to be properly fixed, either in css (static) or by javascript (dynamic)

---

$(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即可为元素设置正确的宽度并更新输入文本.

And finally some javascript to set the correct widths for our elements and update the input text everytime we choose a new value from the select.

(*):伪元素在IE7或IE中不起作用.一种解决方法是对 .wrap 元素

(*) : The pseudo element will not work in IE7 or . A workaround is to use a background image for the .wrap element

这篇关于从选择控件html复制所选项目的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！