Форум

razorg1991 · #1 (**permalink**) 05.01.2016, 16:50

Есть следующий html

<table>
    <tbody>
    <!--шапка-->
        <tr>
            <th>
                <select id="column_1" class="product-fields">
                    <option id="opt_1" selected="selected">opt_1</option>
                    <option id="opt_2">opt_2</option>
                    <option id="opt_3">opt_3</option>
                    <option id="opt_4">opt_4</option>
                </select>
            </th>
            <th>
                <select id="column_2" class="product-fields">
                    <option id="opt_1" selected="selected">opt_1</option>
                    <option id="opt_2">opt_2</option>
                    <option id="opt_3">opt_3</option>
                    <option id="opt_4">opt_4</option>
                </select>
            </th>
            <th>
                <select id="column_3" class="product-fields">
                    <option id="opt_1" selected="selected">opt_1</option>
                    <option id="opt_2">opt_2</option>
                    <option id="opt_3">opt_3</option>
                    <option id="opt_4">opt_4</option>
                </select>
            </th>
        </tr>
        
        <!--тело-->
        <tr>
            <td>Ячейка 1
                <input type="hidden" name="" class="column_1" value="ячейка_1" />
            </td>
            <td>Ячейка 2
                <input type="hidden" name="" class="column_2" value="ячейка_2" />
            </td>
            <td>Ячейка 3
                <input type="hidden" name="" class="column_3" value="ячейка_3" />
            </td>
        </tr>
        <tr>
            <td>Ячейка 1
                <input type="hidden" name="" class="column_1" value="ячейка_1" />
            </td>
            <td>Ячейка 2
                <input type="hidden" name="" class="column_2" value="ячейка_2" />
            </td>
            <td>Ячейка 3
                <input type="hidden" name="" class="column_3" value="ячейка_3" />
            </td>
        </tr>
        <tr>
            <td>Ячейка 1
                <input type="hidden" name="" class="column_1" value="ячейка_1" />
            </td>
            <td>Ячейка 2
                <input type="hidden" name="" class="column_2" value="ячейка_2" />
            </td>
            <td>Ячейка 3
                <input type="hidden" name="" class="column_3" value="ячейка_3" />
            </td>
        </tr>
    </tbody>
</table>

Нацарапал (назвать это "написал" не могу, php все-таки проще дается

) следующий код

// Выполняем весь скрипт по окончанию загрузки документа
$(document).ready(function() {
    alert('Скрипт загружен');
    
    // Логика следующая
    // По событию change select: 
    // Получаем id активного option
    // Получаем id родителя выбранного option (им является id select, он же номер колонки th)
    // Устанавливаем атрибут name input'a равное id выбранного option, где id родителя option = классу input
    
    // отслеживаем событие выбора select
    $('select.product-fields').change(function() {
        
        // получаем id активного option
        var option_id = $('select.product-fields option:selected').attr('id');
        alert(option_id);
        
        // Получаем id родителя выбранного option
        var option_parent = $('select.product-fields option:selected').parent().attr('id');
        alert(option_parent);
        
        // Устанавливаем атрибут name input'a равное id выбранного option, где id родителя option = классу input
        $('input.'+option_parent).each(function() {
            $(this).attr('name', option_id+'[]');
        });
        
    });
    
});

Ошибок в консоли нет, скрипт не кэшируется (проверял).

Но скрипт не работает почему-то

Выводит только "Скрипт загружен" и все.
Хочу сделать, чтобы при выборе соответствующего option из select, айдишник выбранного option присваивался атрибуту name инпутов (для последующей отправки на сервер) в соответствующей колонке. Но че-то по-моему даже выборка select не срабатывает

Где я напортачил? Еще правильно ли я использовал this?

laimas · #2 (**permalink**) 05.01.2016, 17:31

Ой нет, вопрос снимается - список на поля строк. Вот только почему строкам не понятно, если в каждой строке выберут одно и тоже имя, тогда что?

Decode · #3 (**permalink**) 05.01.2016, 17:39

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
    </style>
</head>
<body>
<table>
    <tbody>
    <!--шапка-->
    <tr>
        <th>
            <select id="column_1" class="product-fields">
                <option id="opt_1" selected="selected">opt_1</option>
                <option id="opt_2">opt_2</option>
                <option id="opt_3">opt_3</option>
                <option id="opt_4">opt_4</option>
            </select>
        </th>
        <th>
            <select id="column_2" class="product-fields">
                <option id="opt_1" selected="selected">opt_1</option>
                <option id="opt_2">opt_2</option>
                <option id="opt_3">opt_3</option>
                <option id="opt_4">opt_4</option>
            </select>
        </th>
        <th>
            <select id="column_3" class="product-fields">
                <option id="opt_1" selected="selected">opt_1</option>
                <option id="opt_2">opt_2</option>
                <option id="opt_3">opt_3</option>
                <option id="opt_4">opt_4</option>
            </select>
        </th>
    </tr>

    <!--тело-->
    <tr>
        <td>Ячейка 1
            <input type="hidden" name="" class="column_1" value="ячейка_1" />
        </td>
        <td>Ячейка 2
            <input type="hidden" name="" class="column_2" value="ячейка_2" />
        </td>
        <td>Ячейка 3
            <input type="hidden" name="" class="column_3" value="ячейка_3" />
        </td>
    </tr>
    <tr>
        <td>Ячейка 1
            <input type="hidden" name="" class="column_1" value="ячейка_1" />
        </td>
        <td>Ячейка 2
            <input type="hidden" name="" class="column_2" value="ячейка_2" />
        </td>
        <td>Ячейка 3
            <input type="hidden" name="" class="column_3" value="ячейка_3" />
        </td>
    </tr>
    <tr>
        <td>Ячейка 1
            <input type="hidden" name="" class="column_1" value="ячейка_1" />
        </td>
        <td>Ячейка 2
            <input type="hidden" name="" class="column_2" value="ячейка_2" />
        </td>
        <td>Ячейка 3
            <input type="hidden" name="" class="column_3" value="ячейка_3" />
        </td>
    </tr>
    </tbody>
</table>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>
    $(document).ready(function() {
        alert('Скрипт загружен');
        
        $('table').on('change', '.product-fields', function() {
            var optionId = $(this).children(':selected').attr('id'),
                parentId = $(this).attr('id');

            $('input.' + parentId).each(function() {
                $(this).attr('name', optionId);
            });
        });
    });
</script>
</body>
</html>

razorg1991 · #4 (**permalink**) 05.01.2016, 17:43

Сообщение от laimas

если в каждой строке выберут одно и тоже имя, тогда что?

Допускается такой вариант, в двух колонках могут быть одинаковые типы данных

Сообщение от laimas

Ой нет, вопрос снимается - список на поля строк

Не понял что Вы этим хотели сказать.

Мне важно чтобы сейчас заработал скрипт, так как нужно, а не выслушивать сотни "что будет" или "а почему".

razorg1991 · #5 (**permalink**) 05.01.2016, 17:53

Decode,
Спасибо! Заработало!

Только вопрос, а почему не работает если сделать так

$(this).attr('name', optionId+'[]');

?????

Decode · #6 (**permalink**) 05.01.2016, 17:58

razorg1991, тогда будет строка name="opt_id[]"

razorg1991 · #7 (**permalink**) 05.01.2016, 18:49

Сообщение от Decode

тогда будет строка name="opt_id[]"

Собственно я это и хотел получить. Изменил - ничего не сработало. Вернул все как было в Вашем варианте - и.... ВООБЩЕ ПЕРЕСТАЛО ВСЕ РАБОТАТЬ

Чистил кэш - не работает, пробовал в другом браузере - тоже НЕ работает!
Я ничего не пойму

Как так-то? Сайт сейчас на локалхосте, может быть в этом причина. Но как-то странно в начале и на локале заработало. Т.е. как бы получается что после изменений перестает работать....

Decode · #8 (**permalink**) 05.01.2016, 19:12

Сообщение от razorg1991

Собственно я это и хотел получить. Изменил - ничего не сработало. Вернул все как было в Вашем варианте - и.... ВООБЩЕ ПЕРЕСТАЛО ВСЕ РАБОТАТЬ

А что консоль говорит?

razorg1991 · #9 (**permalink**) 05.01.2016, 19:23

Сообщение от Decode

А что консоль говорит?

Консоль молчит

Щас сделал следующие

$(document).ready(function() {

        alert('Скрипт загружен');

         

        $('table').on('change', '.product-fields', function() {
            
            alert('Было событие');

            var optionId = $(this).children(':selected').attr('id'),

                parentId = $(this).attr('id');

 

            $('input.' + parentId).each(function() {

                $(this).attr('name', optionId);

            });
        });

    });

Первый раз alert события вывело, и сработал скрипт. Удалил alert - опять ничего не работает. Вернул алерт - не выводит его, т.е. получается что событие не происходит, причем ни в одном браузере

Decode · #10 (**permalink**) 06.01.2016, 00:02

razorg1991, без понятия, что у вас там. У меня все работает.

Форум

Справочник

Discord чат

Курсы javascript