從動態行獲取動態下拉值

是否可以使用此腳本獲取每行的下拉值並將其放入文本字段中。例如，單擊「+」按鈕並單擊下拉單元后，下拉列表的值將出現在文本字段中。下面是代碼：從動態行獲取動態下拉值

<html> 
<head></head> 
<body> 
<form> 
<table> 
<tr> 
    <td>Name:- </td> 
    <td><input type="text" name="userid" id="userid"/></td> 
</tr> 

<tr> 
    <td>Gender:- </td> 
    <td><select name="select_gender" id="select_gender"> 
<option value="M">Male</option> 
<option value="F">Female</option> 
</select></td> 
</tr> 
<tr> 
    <td>City:- </td> 
    <td><input type="text" name="city" id="city"/></td> 
</tr> 
<tr>  
<td><input type="button" id="savebtn" value="Save"/></td> 
</tr> 

</table> 
<div id="selected_text"> 

</div> 
<div id="selected_urls"> 
<a href="http://msatuniverse.net/main.aspx">E-Support </a> 
<a href="http://ontime.mahindrasatyam.com/">Ontime </a> 
</div> 
<table> 
<tr> 
<td> 
<table id="fmly_dtls" border=1> 
    <tr> 
     <td> 
      <input type="text" id="member_nm"> 
       </td> 
     <td> 
      <select id="select_member_relation" onchange=""> 
       <option value="F">Father</option> 
       <option value="M">Mother</option> 
       <option value="H">Husband</option> 
       <option value="W">Spouse</option> 
       <option value="S">Son</option> 
       <option value="D">Daughter</option> 
      </select> 
       </td> 
     <td> 
      <input type="text" id="member_dob"> 
       </td> 
<td> 
      <input type="button" id="madd" value="+">/<input type="button" id="mdelete" 

value="-"> 
       </td> 

     </tr> 
</table> 
</td> 
</tr> 

<tr> 
<td> 
<table> 
<tr> 
    <td><input type="button" id="finalbtn" value="Final"></td> 
</tr> 
</table> 
</td> 
</tr> 
</table> 

</table> 
</form> 
</body> 
</html> 

<script type="text/javascript" src="jquery-1.8.3.js"></script>   
<script type="text/javascript"> 
$(document).ready(function() { 

    var windowSizeArray = ["width=200,height=200", "width=300,height=400,scrollbars=yes"]; 
    $("a[href]").click(function() { 
     alert('Hi'); 

     var url = $(this).attr("href"); 
     var windowName = "popUp"; //$(this).attr("name"); 
     var windowSize = windowSizeArray[$(this).attr("rel")]; 
     alert(windowSize); 
     window.open(url, windowName, windowSize); 
    }); 

    $("#madd").click(function() { 

     //.html to find out the html content data.val() is not working when selected div tag. 
     if ($("#selected_text").html() != '') { 
      //we need to findout particular textboxes using find function 
      $(this).closest("tr").clone(true).appendTo("#fmly_dtls").find('input').val(''); 
     } else { 
      alert('Please save the data'); 
     } 
    }); 
    $("#mdelete").click(function() { 


     $(this).closest("tr").remove(); 

    }); 

    $("#select_member_relation").change(function(){ 

     $("#fmly_dtls tr").each(function(i) { 

      $("#member_nm").val($(this).find("#select_member_relation").val()); 
      //alert('xxx'); 
     }); 


     }) 
     .trigger('change'); 


    $("#select_member_relationxx").change(function() { 
     var membrdt = ''; 

     $("#fmly_dtls tr").each(function(i) { 

      var myValue2 = $(this).find("#select_member_relation").val() 
      $("#member_nm").val($(this).find("#select_member_relation").val()); 

         alert(myValue3); 
      alert(myValue2); 
      }); 
     }); 

    $("#finalbtn").click(function() { 
     var membrdt = ''; 

     $("#fmly_dtls tr").each(function(i) { 
      var myValue2 = $(this).find("#select_member_relation").val(); 
      //var myValue2 = $("#select_member_relation").val(); 
      alert(myValue2); 
      //alert(myValue2.find('member_nm')); 
     }); 

    }); 
    $("#savebtn").click(function() { 
     var gender = '', 
      name = '', 
      gender_text = '', 
      address = ''; 
     gender = $("#select_gender").val(); 
     //without option:selected attribute, it can retrived the text like Male Female 
     gender_text = $("#select_gender option:selected").text(); 
     name = $("#userid").val(); 
     address = $("#city").val(); 
     //alert(gender+','+name+','+gender_text); 
     //var _this = this; //or var $_this = this; $("#selected_text").parent().html(data); 
     var data = name + ',' + gender_text + ',' + address + '<a href="http://www.google.co.in/" > google</a>'; 

     $("#selected_text").html(data); 
     $("#selected_text").css('background-color', 'red'); 
     $("#selected_urls").hide(); 
     //$("#selected_text").html=data; 
    }); 
}); 

</script>

來源

2013-01-07 Syazri Aris

請，把它放在jsfiddle中。 – intelis

http://jsfiddle.net/rMFMy/ –

你不能在頁面中重複ID，它們必須是唯一的定義。需要將所有重複的ID更改爲類，這也意味着一些腳本更改 – charlietfl

檢查fiddle..here之前是一些你應該注意的事情..

1）ID應該永遠是獨一無二的......你的克隆項目有相同的ID原始元素有..所以你的情況有多個ID與相同的名稱...

變化：使克隆元素類的所有ID ..

2）你的代碼有一些解析錯誤，如輸入標籤是沒有正確關閉（<input />）。這很小，但如果我們不犯這些錯誤，它會更好。

3）改變了你的所有事件選擇器類。（$(".mdelete").click(function() {.. , $(".select_member_relation").change(function(){.... so on）

4）使用此代碼找到所選擇的值，並把它放到輸入

$(this).parent().prev().find("input.member_nm").val($(this).val());

fiddle這裏

來源

2013-01-07 05:18:42 bipen

非常感謝你:) –

從動態行獲取動態下拉值

回答

相關問題