Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.01.2016, 15:50
Аспирант
Отправить личное сообщение для razorg1991 Посмотреть профиль Найти все сообщения от razorg1991
 
Регистрация: 10.11.2012
Сообщений: 98

Проблемы с элементами 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+'[]');
        });
        
    });
    
});


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

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

Где я напортачил? Еще правильно ли я использовал this?
Ответить с цитированием
  #2 (permalink)  
Старый 05.01.2016, 16:31
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 11,748

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

Последний раз редактировалось laimas, 05.01.2016 в 16:35.
Ответить с цитированием
  #3 (permalink)  
Старый 05.01.2016, 16:39
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 572

<!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>
Ответить с цитированием
  #4 (permalink)  
Старый 05.01.2016, 16:43
Аспирант
Отправить личное сообщение для razorg1991 Посмотреть профиль Найти все сообщения от razorg1991
 
Регистрация: 10.11.2012
Сообщений: 98

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

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

Мне важно чтобы сейчас заработал скрипт, так как нужно, а не выслушивать сотни "что будет" или "а почему".
Ответить с цитированием
  #5 (permalink)  
Старый 05.01.2016, 16:53
Аспирант
Отправить личное сообщение для razorg1991 Посмотреть профиль Найти все сообщения от razorg1991
 
Регистрация: 10.11.2012
Сообщений: 98

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


?????
Ответить с цитированием
  #6 (permalink)  
Старый 05.01.2016, 16:58
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 572

razorg1991, тогда будет строка name="opt_id[]"
Ответить с цитированием
  #7 (permalink)  
Старый 05.01.2016, 17:49
Аспирант
Отправить личное сообщение для razorg1991 Посмотреть профиль Найти все сообщения от razorg1991
 
Регистрация: 10.11.2012
Сообщений: 98

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

Последний раз редактировалось razorg1991, 05.01.2016 в 17:52.
Ответить с цитированием
  #8 (permalink)  
Старый 05.01.2016, 18:12
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 572

Сообщение от razorg1991
Собственно я это и хотел получить. Изменил - ничего не сработало. Вернул все как было в Вашем варианте - и.... ВООБЩЕ ПЕРЕСТАЛО ВСЕ РАБОТАТЬ
А что консоль говорит?
Ответить с цитированием
  #9 (permalink)  
Старый 05.01.2016, 18:23
Аспирант
Отправить личное сообщение для razorg1991 Посмотреть профиль Найти все сообщения от razorg1991
 
Регистрация: 10.11.2012
Сообщений: 98

Сообщение от 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 - опять ничего не работает. Вернул алерт - не выводит его, т.е. получается что событие не происходит, причем ни в одном браузере
Ответить с цитированием
  #10 (permalink)  
Старый 05.01.2016, 23:02
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 572

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
изменение значения input при смене значения select galart jQuery 4 30.01.2015 18:39
Замена input на select dima_riabets Общие вопросы Javascript 8 16.01.2015 20:28
C поля input в select dima_riabets Элементы интерфейса 3 18.03.2014 20:32
При добавлении DOCTYPE "плывут" размеры input type=text Demath (X)HTML/CSS 4 08.07.2012 18:27
глюк форума Gvozd Сайт Javascript.ru 11 18.03.2009 13:37