Проблемы с элементами 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? |
Ой нет, вопрос снимается - список на поля строк. Вот только почему строкам не понятно, если в каждой строке выберут одно и тоже имя, тогда что?
|
<!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>
|
Цитата:
Цитата:
Мне важно чтобы сейчас заработал скрипт, так как нужно, а не выслушивать сотни "что будет" или "а почему". |
Decode,
Спасибо! Заработало! :dance: Только вопрос, а почему не работает если сделать так
$(this).attr('name', optionId+'[]');
????? |
razorg1991, тогда будет строка name="opt_id[]"
|
Цитата:
Чистил кэш - не работает, пробовал в другом браузере - тоже НЕ работает! Я ничего не пойму :blink: Как так-то? Сайт сейчас на локалхосте, может быть в этом причина. Но как-то странно в начале и на локале заработало. Т.е. как бы получается что после изменений перестает работать.... |
Цитата:
|
Цитата:
Щас сделал следующие
$(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 - опять ничего не работает. Вернул алерт - не выводит его, т.е. получается что событие не происходит, причем ни в одном браузере :-? |
razorg1991, без понятия, что у вас там. У меня все работает.
|
| Часовой пояс GMT +3, время: 03:09. |