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

问题描述

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

我不想要他们能够改变项目的文本（只需用鼠标/键盘选择它）

这里是一个小提琴，显示问题（我不能选择所选项目的文本）

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

 < select> 
< option value =orange>橙色< /选项> 
< option value =blue>蓝色< / option> 
< option value =red>红色< / option> 
< option value =white>白色< / option> 
< / select> 
  

我可以在没有JS的情况下执行此操作吗？
如果没有，我该如何做到这一点与jQuery？

解决方案

这是一种模仿你的行为，有一些定位魔术和jQuery。该代码仅在Chrome上进行测试，因此可能需要稍微调整才能在所有浏览器中看起来不错。另请参阅IE7页面底部的注释

http ：//jsfiddle.net/FvFVJ/

html很简单。只需在您的select旁边添加一个 input 字段并将它们都包含在div中。您可以将 readonly 属性添加到输入字段，如果您愿意，可以禁用编辑

---

  .wrap {
 position：relative; 
 border：1px solid #ccc; 
 height：21px; 
 border-radius：4px; 
} 
 
 .wrap select {
 opacity：0; 
位置：绝对; 
 top：-3px; 
 left：-3px; 
 z-index：1; 
} 
 
 .wrap input {
 display：inline-block; 
位置：绝对; 
 top：0; 
 left：2px; 
 z-index：2; 
 border：0; 
} 
 
 .wrap：after {
 content：\25BE; 
 font-size：1.5em; 
位置：绝对; 
 right：0; 
 top：-3px; 
 z-index：0; 
} 
  

这两个元素都是 position：absolute 包装内。注意事项

1. select 元素具有不透明度： 0 这使它不可见，但仍然可以点击


2. 伪元素 .wrap：在之后，一个下拉箭头（*）


3. z-index 排序，将输入放在选择角上
   ，它将作为下拉按钮


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 元素使用背景图像

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>

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

解决方案

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/

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;
}

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

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);
    });
});

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.

---

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

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