Функция next()
Всем привет, есть несколько селектов (<select>) на странице как при нажатии на селект выбрать следующий за ним селект.
<select> <option>1</option> <option>2</option> </select> <select> <option>1</option> <option>2</option> </select> Пробовал так:
$("body").on("change","select",function(){
$(this).next("#select_"+selected_depth).append(data);
})
не работает, ссылка $(this) обязательна, т.е. нужно определить селект на который нажали, |
Цитата:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
$(function (){
$("body").on("change","select",function(){
$(this).next('select').focus();
});
});
</script>
</head>
<body>
<select>
<option></option>
<option>1</option>
<option>2</option>
</select>
<select>
<option></option>
<option>1</option>
<option>2</option>
</select>
</body>
</html>
|
Спасибо за ответ, но мне надо в выбранный селект добавить пункты <option></option>
Варианты
$(this).next("select").data(options);
$(this).next("select").append(options);
$(this).next('select').focus().append(options)
не работают |
Купэ, что есть у тебя options? :blink:
|
Цитата:
Как вариант...
$(this).next('select').prepend('<option></option>').focus();
|
Ваш вариант правильный , только я в функции $.post() добавляю варианты списка там и ссылку ставлю в этой функции из-за этого не добавляется. ,т.е.
$("document").ready(function(){
$("body").on("change","select",function(){
$.post("/auth/load_objects_by_depth.php",{},function(data){
$(this).next("select").prepend(data).focus();
})
})
})
Можно как-нибудь из этой функции сослаться на функцию которая вызывается при изменении списка ? |
Цитата:
Как вариант...
$(function(){
$("body").on("change","select",function(){
var obj=this;
$.post(
"/auth/load_objects_by_depth.php",
{},
function(data){
$(obj).next("select").prepend(data).focus();
}
);
});
});
|
Спасибо, я вчера до этого додумался, если можете ответьте на вопрос есть div внутри него селекты , как при нажатии на селект определить в каком контейнере <div> он находится и перебрать следующие за ним селекты
<div class="cont">
<select id="select_1">
<option>1</option>
</select>
<select id="select_2">
<option>1</option>
</select>
</div>
<div class="cont">
<select id="select_1">
<option>2</option>
</select>
<select id="select_2">
<option>3</option>
</select>
</div>
Пробовал делать так:
$("body").on("change","select",function(){
var main_container =$(this).parent('.cont');
var count_select = $("select[id^='select_']").size();
for ( var i = 1; i <= count_select; i++ ){
$(main_container" > #select_"+i).prop("disabled", true);// не пашет
или
("#select_"+i).parent(main_container).prop("disabled",true);//тоже не пашет
}
})
|
Купэ,
а то что id повторяется ? |
Цитата:
Цитата:
|
Купэ,
на всякий случай Цитата:
|
Цитата:
var main_container =$(this).parent('.cont'); -выбираем родителя нажатого селекта т.е. это будет один из дивов с классом .cont
Надо у селектора $("#select_"+i), определить блок- родитель и у него добавить атрибут Подобная конструкция не работает
("#select_"+i).parent(main_container).prop("disabled",true);
|
Цитата:
http://javascript.ru/forum/jquery/42...tml#post278781 Достаточно написать $(this).parent(); // или $(this.parentNode); Цитата:
|
Сделал вот так правильно было написать:
$(main_container).children("#select_"+i).prop("disabled", true);
|
prop("disabled",true); - атрибут disabled активирует, кстати нормально работает, можно и так .attr("disabled","disabled");
|
Цитата:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div class="cont">
<select id="select_1">
<option>1</option>
<option>test</option>
</select>
<select id="select_2">
<option>1</option>
<option>test</option>
</select>
<select id="select_3">
<option>1</option>
<option>test</option>
</select>
<select id="select_4">
<option>1</option>
<option>test</option>
</select>
</div>
<div class="cont">
<select id="select_5">
<option>2</option>
<option>test</option>
</select>
<select id="select_6">
<option>3</option>
<option>test</option>
</select>
<select id="select_7">
<option>4</option>
<option>test</option>
</select>
<select id="select_8">
<option>5</option>
<option>test</option>
</select>
</div>
<script>
$("body").on("change","select",function(){
var main_container = $(this).parents('.cont');
var count_select = $("select[id^='select_']", main_container);
var i = count_select.index(this);
// вариант без перебора
count_select.slice(++i).prop("disabled", true)
// вариант с перебором
//count_select.each(function(indx, element){
//if(indx > i) $(element).prop("disabled", true)
// })
})
</script>
</body>
</html>
|
У меня так не пойдет потому что в каждом контейнере id селектов одинаковые select_1 select_2, потому что эти списки соответствуют уровням вложенности каталога т.е. select_уровень вложенности,
|
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 16:05. |