Question

嗨我有代码，我只是动态添加一行。但问题是在选择框内的下一行，值没有改变。那么如何使用Jquery Mobile实现这一点.Below是我的代码。< / p>

$(document).ready(function() {
    $("input.add").on('click', function() { // brace missing
        var $tr = $(this).closest('tr');
        var $clone = $tr.clone();
        $clone.find(':text').val('');
        $clone.find(':checkbox:checked').prop('checked', false).val('N');
        $clone.find('#preferred').val('N');
        //$clone.find('#phntype').selectmenu("refresh", true);
        $tr.after($clone);
    });
});

<!DOCTYPE html>
<html>
<head>
    <title>Welcome</title>
    <link href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.css" rel="stylesheet" />
    <script src="http://code.jquery.com/jquery-2.1.1.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</head>
<body>

    <form name="form" id="form" method="post" action="%bind(:11)">
        <label></label>
        <!--/Phone Table Information -->

        <table border="1" id="phone" width="100%" name="phone">
            <tr>
                <th>Type</th>
                <th>Country Code</th>
                <th>*Phone</th>
                <th>Preferred</th>
                <th>Add/Delete</th>
            </tr>
            <tr>
                <td>
                    <div data-role="fieldcontain">
                        <select name="phntype" id="phntype">
                            <option value="BUSN" selected="">Business</option>
                            <option value="CAMP">Campus</option>
                            <option value="CEL2">Cellphone2</option>
                            <option value="CELL">Cellphone</option>
                            <option value="FAX">FAX</option>
                            <option value="HOME">Home</option>
                            <option value="OTR">Other</option>
                        </select>
                    </div>
                </td>
                <td>
                    <div data-role="fieldcontain">
                        <label id="Streetlbl">Street:</label>
                        <input type="text" id="Street" name="Street" value="" />
                    </div>
                </td>
                <td>
                    <div data-role="fieldcontain">
                        <label id="Streetlbl">Street:</label>
                        <input type="text" id="Street" name="Street" value="" />
                    </div>
                </td>
                <td>
                    <div data-role="fieldcontain">
                        <label id="Streetlbl">Street:</label>
                        <input type="text" id="Street" name="Street" value="" />
                    </div>
                </td>
                <td>
                    <input type='button' value='+' class='add' />
                    <input type='button' value='-' class='delete' />
                </td>
            </tr>
        </table>
        <p></p>

    </form>

</body>
</html>

Answer 1

在js中添加以下代码，我建议您将class添加到select而不是id，因为您正在克隆整个控件并附加它DOM中id DOM的{{1}}与DOM规则及其不良做法相违背。所以只需在您的select

中添加课程

<强> DEMO HERE

$(document).on('change','.phntype',function(){
        $(this).prev('span.phntype').text($(this).find('option:selected').text()); 
});

添加class，删除id

<select name="phntype" class="phntype">

为什么在动态地将Row添加到表时，Select框没有更改值？

1 个答案: