Question

是否可以使用此脚本获取每行的下拉值并将其放在文本字段中。例如，单击“+”按钮并单击下拉列表后，下拉列表的值将显示在文本字段中。这是代码：

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

Answer 1

在检查小提琴之前......你应该注意一些事情......

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

从动态行获取动态下拉列表值

1 个答案: