我正在使用克隆在单击按钮时生成动态 HTML， 以下是我的 HTML。
<input id="AddPhoneType" onclick="setEmailValues()" value="Gen Email" type="button">
<div style="margin-top: 10px;" class="ExtAddEmailTemplate" id="ExtAddEmailTemplate">
<input name="RemoveEmail" class="RemovePhoneBtn" value="-" id="RemoveEmail" type="button">
<input type="text" name="txtExtEmail" class="ExtEmailClass" value="" placeholder="Email" /></div>
<div id="EmailContainer"> </div>
下面是脚本
$(document).ready(function () {
$('#AddExtEmail').click(function () {
$('<div/>', {
'class': 'ExtAddEmail', html: GetHtmlForEmail()
}).hide().appendTo('#EmailContainer').slideDown('slow');
});
});
function setEmailValues() {
$('<div/>', {
'class': 'ExtAddEmail', html: GetHtmlForEmail()
}).hide().appendTo('#EmailContainer').slideDown('slow');
}
function GetHtmlForEmail()
{
var len = $('.ExtAddEmail').length;
var emailValue = 'oner@one.com,twor@two.com';
var emaiArray = emailValue.split(",");
var $html = $('.ExtAddEmailTemplate').clone();
$html.find('[name=txtExtEmail]')[0].name = "txtExtEmail" + len;
return $html.html();
}
现在，单击按钮时，我需要生成 2 个文本框，假设带有各自的电子邮件 ID，假设为“oner@one.com”、“twor@two.com”
现在我的问题是我无法在生成 HTML 时设置该值 我尝试过以下操作
$html.find('[type=text]')[0].val('oner@one.com'); Have try finding using class , text etc. but was not able to set the value.
我还需要设置下拉菜单的值，假设如果我能够设置文本框的值，也能够为下拉菜单设置值。
我可以在生成 HTML 后执行此操作
$('#EmailContainer .ExtEmailClass').each(function () {
this.value = 'oner@one.com';
});
但我认为如果我们可以在生成 HTML 时设置值是最合适的解决方案。
谢谢
最佳答案
您可以使用下面的代码，它运行良好，
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Tring Reset</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<input id="AddPhoneType" onclick="setEmailValues()" value="Gen Email" type="button">
<div style="margin-top: 10px;" class="ExtAddEmailTemplate" id="ExtAddEmailTemplate">
<input name="RemoveEmail" class="RemovePhoneBtn" value="-" id="RemoveEmail" type="button">
<input type="text" name="txtExtEmail" class="ExtEmailClass" placeholder="Email" /></div>
<input type="button" id="AddExtEmail" value="+"/>
<div id="EmailContainer"> </div>
<script>
$(document).ready(function () {
$('#AddExtEmail').click(function () {
$('<div/>', {
'class': 'ExtAddEmail', html: GetHtmlForEmail()
}).hide().appendTo('#EmailContainer').slideDown('slow');
});
});
function setEmailValues() {
$('<div/>', {
'class': 'ExtAddEmail', html: GetHtmlForEmail()
}).hide().appendTo('#EmailContainer').slideDown('slow');
}
function GetHtmlForEmail()
{
var len = $('.ExtAddEmail').length;
var emailValue = 'oner@one.com,twor@two.com';
var emaiArray = emailValue.split(",");
var $tryiy = $('.ExtAddEmailTemplate').clone();
$tryiy.find('[name=txtExtEmail]')[0].name = "txtExtEmail" + len;
$tryiy.find('[name=txtExtEmail'+len+']').attr("value",emaiArray[0]);
return $tryiy.html();
}
</script>
</body>
</html>我已经使用 jquery 使用元素的 attr("value",emaiArray[0]); 属性设置了值，并且工作正常
关于javascript - 如何在生成动态html时在Jquery Clone中设置值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40734979/