動的HTMLを生成する際にJquery Cloneの値を設定する方法

ボタンのクリックで動的HTMLを生成するためにクローンを使用しています。以下は同じもののHTMLです。動的HTMLを生成する際にJquery Cloneの値を設定する方法

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

そして、次の私は2テキストボックスを生成する必要があるスクリプトボタンをクリックするだけで今

$(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 = '[email protected],[email protected]'; 
      var emaiArray = emailValue.split(","); 


      var $html = $('.ExtAddEmailTemplate').clone(); 
      $html.find('[name=txtExtEmail]')[0].name = "txtExtEmail" + len; 


      return $html.html(); 
     }

は、それぞれの電子メールのIDと聞かせて言う「[email protected]」、「twor言わせています@ two.com」

今私の問題は、私は以下の私が試してみましたHTML を発生させながら値を設定することはできませんよということです

$ html.find（ '[type = text]'）[0] .val（'[email protected] '）; クラス、テキストなどを使用して検索しようとしましたが、値を設定できませんでした。

私はまた、ドロップダウンの値を設定する必要がある場合、私はテキストボックスの値を設定することができますが、それもドロップダウンのために行うことができると仮定します。

HTMLが

$('#EmailContainer .ExtEmailClass').each(function() { 
     this.value = '[email protected]'; 
    });

を生成したばかりしかし、HTMLを生成することは、最も適切なソリューションである一方で、我々は値を設定することができる場合、私は思うの後、私はそれを行うことができると思います。

おかげ

出典

2016-11-22 BJ Patel

あなたはそれが完璧に働いている以下のコード、私はjqueryのを使用して要素のattr("value",emaiArray[0]);プロパティを使用して値を設定して、それがある

<!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> \t 
 
<script> 
 
$(document).ready(function() { 
 
\t $('#AddExtEmail').click(function() { 
 
\t     $('<div/>', { 
 
\t      'class': 'ExtAddEmail', html: GetHtmlForEmail() 
 
\t     }).hide().appendTo('#EmailContainer').slideDown('slow'); 
 
\t    }); 
 
\t  }); 
 

 
\t  function setEmailValues() { 
 

 
\t    $('<div/>', { 
 
\t      'class': 'ExtAddEmail', html: GetHtmlForEmail() 
 
\t     }).hide().appendTo('#EmailContainer').slideDown('slow'); 
 
\t   } 
 

 
\t function GetHtmlForEmail() 
 
\t   { 
 
\t    var len = $('.ExtAddEmail').length; 
 

 
\t   var emailValue = '[email protected],[email protected]'; 
 
\t    var emaiArray = emailValue.split(","); 
 

 

 
\t    var $tryiy = $('.ExtAddEmailTemplate').clone(); 
 
\t    $tryiy.find('[name=txtExtEmail]')[0].name = "txtExtEmail" + len; 
 
\t    $tryiy.find('[name=txtExtEmail'+len+']').attr("value",emaiArray[0]); 
 

 
\t    return $tryiy.html(); 
 
\t   } 
 
</script> 
 
</body> 
 
</html>

を使用することができますうまく動作します

出典

2016-11-22 07:24:31 GraveyardQueen

あなたの答えをありがとう、あなたもdropdowを選択するための解決策を提案できますか？）$ html.find（ '[id = <％= ddlPhontType.ClientID％>' + len + ']'） –

この部分は<％= ddlPhontType.ClientID％>に渡されていますか？ id属性？ – GraveyardQueen

動的HTMLを生成する際にJquery Cloneの値を設定する方法

答えて

関連する問題