Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Проблемы с элементами select и input (https://javascript.ru/forum/dom-window/60535-problemy-s-ehlementami-select-i-input.html)

razorg1991 05.01.2016 16:50
Проблемы с элементами select и input
 
Есть следующий 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+'[]');
        });
        
    });
    
});


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

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

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

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

Decode 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 05.01.2016 17:43
Цитата:
Сообщение от laimas
если в каждой строке выберут одно и тоже имя, тогда что?
Допускается такой вариант, в двух колонках могут быть одинаковые типы данных

Цитата:
Сообщение от laimas
Ой нет, вопрос снимается - список на поля строк
Не понял что Вы этим хотели сказать.

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

razorg1991 05.01.2016 17:53
Decode,
Спасибо! Заработало! :dance:
Только вопрос, а почему не работает если сделать так
$(this).attr('name', optionId+'[]');


?????

Decode 05.01.2016 17:58
razorg1991, тогда будет строка name="opt_id[]"

razorg1991 05.01.2016 18:49
Цитата:
Сообщение от Decode
тогда будет строка name="opt_id[]"
Собственно я это и хотел получить. Изменил - ничего не сработало. Вернул все как было в Вашем варианте - и.... ВООБЩЕ ПЕРЕСТАЛО ВСЕ РАБОТАТЬ :blink:
Чистил кэш - не работает, пробовал в другом браузере - тоже НЕ работает!
Я ничего не пойму :blink: Как так-то? Сайт сейчас на локалхосте, может быть в этом причина. Но как-то странно в начале и на локале заработало. Т.е. как бы получается что после изменений перестает работать....

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

razorg1991 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 06.01.2016 00:02
razorg1991, без понятия, что у вас там. У меня все работает.


Часовой пояс GMT +3, время: 01:24.
Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице