CODEWITHSUNDEEP
javascriptjqueryhtmljquery-mobile
S Das
S Das

Reputation: 51

Why the Select box is not changing the value while dynamically adding the Row to the table?

Hi I have the code where i am just adding one row dynamically.But the problem is in the next row inside the select box the value are not changing .Then how to achieve this using Jquery Mobile.Below is my code.

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

Upvotes: 1

Views: 266

Answers (1)

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

Add below code in your js and I would like to suggest to add class to your select instead of id since you are cloning the entire controls and appending it to DOM and having similar ids in the DOM is against the DOM rules and its bad practice. So just add class to your select

DEMO HERE

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

Add class, remove id

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

Upvotes: 1

Related Questions