Question

嗨，我有div类下拉列表，当我从下拉列表中选择特定选项时，它将拉出P ID并显示文本和图像。我想做的是有一个按钮，它将选择其中的所有文本/图像以将其复制到剪贴板。

这是我的示例div下拉代码：

<div class="button dropdown"> 
<select id="colorselector">
<option>Select Email templates here</option>
<option value="1st">R17 Update</option>
<option value="2nd">Reset Password</option>
</select>
</div>

当用户从下拉菜单中进行选择时，它将显示一些正文文本和图片

<!---------------------------- P ID 1st---------------------->
<div id="1st" class="colors yellow"> 
<br> 
<p>Sample text</p>
<br>
<p>Sample text/p> 
<br>
<p>Sample text</p>
<br>
<p>Sample Image</a></p>
<img src="https://i.screenshot.net/dl/8j82ein?name=4.jpg" alt="">
<br>
<br> 
</div>

<!---------------------------- P ID 2nd---------------------->
<div id="2nd" class="colors red">
<br> 
<p>Sample text</p>
<br>
<p>Sample text/p> 
<br>
<p>Sample text</p>
<p>Sample Image</p>
<img src="https://i.screenshot.net/dl/8j82ein?name=4.jpg" alt="">
<br>
<font color="#08298A">Kind Regards,
<br> 
</div>

现在我需要的是一个按钮，它将突出显示id上的文本/图像以将其复制到剪贴板

示例：

用户从下拉菜单中选择R17选项

它将显示它的内容：

示例文字

示例文字

示例文字

示例图片（此处为图片）

然后，当用户单击下面的按钮时，它将突出显示所有文本/图像，或选择要复制的P.ID的所有内容。

在此先感谢大家的帮助！

Answer 1

此代码默认情况下隐藏您的模板，并在单击按钮时显示它们。您需要将template类添加到所有模板中，才能正常工作。

function displayTemplate() {
  // hide all templates
  var templates = document.getElementsByClassName('template');
  for(var i = 0; i < templates.length; i++)
  {
    templates.item(i).classList.remove('show');
  }
  
  // show selected template
  selector = document.getElementById('colorselector');
  templateId = selector.value;
  if (templateId !== '') {
    template = document.getElementById(templateId);
    template.classList.add('show');
  }
}

.template {
  display: none;
}

.template.show {
  display: block;
}

<div class="button dropdown"> 
<select id="colorselector">
<option value="">Select Email templates here</option>
<option value="1st">R17 Update</option>
<option value="2nd">Reset Password</option>
</select>
</div>

<button onclick="displayTemplate()">Display template</button>

<!---------------------------- P ID 1st---------------------->
<div id="1st" class="colors yellow template"> 
<br> 
<p>Sample text</p>
<br>
<p>Sample text/p> 
<br>
<p>Sample text</p>
<br>
<p>Sample Image</a></p>
<img src="https://i.screenshot.net/dl/8j82ein?name=4.jpg" alt="">
<br>
<br> 
</div>

<!---------------------------- P ID 2nd---------------------->
<div id="2nd" class="colors red template">
<br> 
<p>Sample text</p>
<br>
<p>Sample text</p> 
<br>
<p>Sample text</p>
<p>Sample Image</p>
<img src="https://i.screenshot.net/dl/8j82ein?name=4.jpg" alt="">
<br>
<font color="#08298A">Kind Regards,
<br> 
</div>

需要帮助按钮，从ID中选择所有文本并复制

1 个答案: