这只适用于IE。下面有一个函数,它在单击div时复制div的内容。它工作得很好。它使用getElementById。我有19个项目,我想用它来做…选项1 -选项19。除了创建19个变量,还有其他方法吗?我对这些东西完全是个新手....
function CopyToClip() {
var Cdiv = document.getElementById('option1');
Cdiv.contentEditable = 'true';
var controlRange;
if (document.body.createControlRange) {
controlRange = document.body.createControlRange();
controlRange.addElement(Cdiv);
controlRange.execCommand('Copy');
}
div.contentEditable = 'false';
}
我应该提到这些id是div的。这些div是基于下拉选择的显示/隐藏。下拉菜单的功能是显示所选的div。函数是:
$(window).load(function () {
$(document).ready(function () {
$('.block').hide();
$('#option1').show();
$('#selectField').change(function () {
$('.block').hide();
$('#' + $(this).val()).fadeIn();
});
});
});
我的HTML是:
<div class="col_1">
<h1>communication:</h1>
<div class="box">
<select id="selectField" style="padding-left: 20px;width:175px">
<option value="option1">Device Shipped to ASC</option>
<option value="option2">Device Received at ASC</option>
<option value="option3">ASC Shipped Device to Store</option>
<option value="option4">Device Pick-up Follow-up</option>
<option value="option5">Device Pick-up Final Reminder</option>
<option value="option6">Impress Phase Direct Feedback</option>
<option value="option7">Abandon Notice</option>
<option value="option8">Mailer Shipped to Client</option>
<option value="option9">Mailer Received by Client</option>
<option value="option10">Mailer Pick-up Notice</option>
<option value="option11">Mailer Final Pick-up Notice</option>
<option value="option12">Mailer Failed to Pick-up</option>
<option value="option13">Mailer Return Defective Device Notice</option>
<option value="option14">Mailer Final Return Defective Device Notice</option>
<option value="option15">Mailer Failed to Return Defective Device</option>
<option value="option16">Mailer Defective Device Received at ASC</option>
<option value="option17">Mailer Charges to Customer</option>
<option value="option18">Mailer Process Confirmation</option>
<option value="option19">Quote Un-replied</option>
</select>
<div id="option2" class="block" style="background-color:white" onClick="javascript:CopyToClip()"> blah </div>
如果我有19个这样的潜水。我不知道这是否有帮助……对不起,我对这个问题有点不知所措。
我不得不做一些改动,你的剪贴板代码不能在所有浏览器上工作:
JSFiddle: http://jsfiddle.net/THU5f/2/
function CopyToClip($div) {
var div = $div[0];
div.contentEditable = 'true';
var controlRange;
if (document.body.createControlRange) {
controlRange = document.body.createControlRange();
controlRange.addElement(div);
controlRange.execCommand('Copy');
alert("Copied: " + div.html());
}
div.contentEditable = 'false';
}
$(function () {
// Hide copy button
$('#copy').hide();
// Hide all content divs
$('.content').hide();
$('#selectField').change(function () {
// Show the copy button
$('#copy').show();
// Hide all content divs
$(".content").fadeOut();
// Show the select content div
$('#' + $(this).val()).fadeIn();
});
$('#copy').click(function(){
// Get the div the current selection points to
var $div = $('#' + $('#selectField').val());
// Copy the div to the clipboard
CopyToClip($div);
});
});
我在整个过程中添加了注释。
我最近一直在做类似的事情。我应该显示/隐藏DIV取决于选择。生成HTML代码,可以生成1到8个选择,每个独立的div显示在其选择下。我想出了这个解决办法。
"第二half"代码基本上找到所有具有给定ID的select
元素,循环遍历它们并根据所选值显示或隐藏div。我必须使用此选择器:$('*[id*=delegate_form]')
和$('*[id*=show_hidden_delegate')
,因为如果我使用$("#delegate_form")
,代码只影响索引为0的元素。我不知道为什么。
代码的前半部分处理只读页面上的相同情况。