rippy
rippy

Reputation: 195

Push values in an array jQuery

I need an array that stores only the selected values from the given options at contiguous locations. When I run the code below, all the values are stored at the same location(0) and the rest of the array is empty.

Following is my html:

<div>
        <table id="myTable">
            <tbody>
                <tr>
                    <th>Robot By</th>
                    <th>Robot Name</th>
                    <th>Status</th>
                    <th>ADD</th>
                    <th>REMOVE</th>
                </tr>
                <tr id="col1">
                    <td>Google</td>
                    <td><em>googlebot</em></td>
                    <td>
                    <select class="myOption">
                        <option value="Same as Default">Same as Default</option>
                        <option value="Allowed">Allowed</option>
                        <option value="Refused">Refused</option>
                    </select></td>
                    <td>
                    <button type="button" class="addC">
                        Add
                    </button></td>
                    <td>
                    <button type="button" class="removeC">
                        Remove
                    </button></td>
                </tr>
                <tr id="col2">
                    <td>MSN Search</td>
                    <td><em>msnbot</em></td>
                    <td>
                    <select class="myOption">
                        <option value="Same as Default">Same as Default</option>
                        <option value="Allowed">Allowed</option>
                        <option value="Refused">Refused</option>
                    </select></td>
                    <td>
                    <button type="button" class="addC">
                        Add
                    </button></td>
                    <td>
                    <button type="button" class="removeC">
                        Remove
                    </button></td>
                </tr>
                <tr id="col3">
                    <td>Yahoo</td>
                    <td><em>yahoo-slurp</em></td>
                    <td>
                    <select class="myOption">
                        <option value="Same as Default">Same as Default</option>
                        <option value="Allowed">Allowed</option>
                        <option value="Refused">Refused</option>
                    </select></td>
                    <td>
                    <button type="button" class="addC">
                        Add
                    </button></td>
                    <td>
                    <button type="button" class="removeC">
                        Remove
                    </button></td>
                </tr>
                <tr id="col4">
                    <td>Ask/Teoma</td>
                    <td><em>teoma</em></td>
                    <td>
                    <select class="myOption">
                        <option value="Same as Default">Same as Default</option>
                        <option value="Allowed">Allowed</option>
                        <option value="Refused">Refused</option>
                    </select></td>
                    <td>
                    <button type="button" class="addC">
                        Add
                    </button></td>
                    <td>
                    <button type="button" class="removeC">
                        Remove
                    </button></td>
                </tr>
            </tbody>
        </table>
    </div>
            <input type="button" value="Create Robots.txt" id="createFile">
            <input type="reset" value="Clear All" id="clearAll">

Following is my jQuery:

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

    $('#myTable tr').find('td').each(function(index) {
        $(this).find('.myOption').each(function(){

            var myArray = [];
            myArray.push($(".myOption option:selected").text()); 

});

Upvotes: 0

Views: 139

Answers (1)

Yury Tarabanko
Yury Tarabanko

Reputation: 45121

Try this (demo):

$("#createFile").click(function() {
    var values = [];

    $('#myTable .myOption').each(function(){
        values.push($(this).val());
    });

    console.log(values);
});

#myTable .myOption selector is actually enough. .val will return selected option value.

Upvotes: 2

Related Questions