Question

我使用clone在点击按钮时生成动态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（ '[类型=文本]'）[0] .VAL（'oner@one.com'）; 尝试使用类，文本等进行查找，但无法设置值。

我还需要设置下拉值，假设如果我可以设置文本框的值，那么它也可以用于下拉列表。

我可以在HTML生成后执行此操作

 $('#EmailContainer .ExtEmailClass').each(function () {
       this.value = 'oner@one.com';
   });

但我认为，如果我们能够在生成HTML时设置价值是最合适的解决方案。

由于

Answer 1

您可以使用以下完美的代码，

＆＃13;

<!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>

＆＃13;

我使用jquery使用元素的attr("value",emaiArray[0]);属性设置了值，并且工作正常

如何在生成动态html时在Jquery Clone中设置值

1 个答案: