2010-07-29 1 views
4

Я как бы застрял в одной - предположительно простой для решения проблемы.jquery get select options to array

Я хочу создать код, который будет использоваться для всех элементов на сайте.

В зависимости от атрибута «метки», назначенного «опции», я хочу скрыть все остальные элементы «div», которые имеют классы, такие же, как и другие «метки» значений «параметров» в этом конкретном меню «выбрать» ,

Позвольте мне продемонстрировать:

<select class="sel_depend" id="reg_where_heard" name="where_heard"> 
    <option value="">Select one…</option> 
    <option value="1">Google</option> 
    <option value="2">Yahoo</option> 
    <option value="3" label="where_heard_magazine">Magazine</option> 
    <option value="4" label="where_heard_other">Other</option> 
</select> 

<div class="where_heard_magazine dn"><input type="text" name="magazine" id="magazine" value="" /></div> 
<div class="where_heard_other dn"><input type="text" name="other" id="other" value="" /></div> 

Теперь - «дп» класс в DIV в меню не просто «дисплей: нет» назначенный.

В зависимости от выбранной опции - если это значение равно 3 - я хочу, чтобы div с классом был таким же, как и отображаемый ярлык, - тогда, если я выберу параметр со значением 4 - все остальные div (где будут заполнены имена классов из всех параметров этого элемента select) следует скрыть() и только выбранное show().

Я не совсем уверен, как поместить все элементы «конкретного» элемента «select» в массив. Тогда, предположительно, я мог бы пройти через него с помощью инструкции each() и выяснить, есть ли у них «метка», и если это так - скрыть элемент с классом, соответствующим его значению.

после этого цикла я мог бы показать элемент с классом, который соответствует значению параметра «label» выбранного «варианта».

Надеюсь, это имеет смысл.

Любая идея, как достичь этого?

Большое спасибо.

ответ

2

дать все div, связанные с определенным выбором класса, который является именем этого элемента. то вы можете сделать что-то вроде:

$('.sel_depend').change(function(){ 
    var class = $(this).attr('name'); 
    $('.' + class).hide(); 
    var divToShowClass = $(this).find(':selected').attr('label'); 
    $('.' + divtoShowClass).show(); 

}); 
+0

Patricia - фантастическое - большое спасибо - именно то, что мне было нужно! – user398341

+1

рад, что я мог бы помочь! если вы не возражаете, отметьте это как ответ, поэтому вопрос не появится в списке без ответа :) – Patricia

+0

Уверен - проблем нет - где кнопка, чтобы отметить это как ответ? – user398341

0
$('.sel_depend').change(function() { 
    var optionWithLabels = $('.sel_depend').children("option[label]"); 
    if($("option:selected", this).attr('label')) { 
     optionWithLabels.each(function(){ 
      $('.' + $(this).attr('label')).hide(); 
     }); 
     $('.' + $("option:selected", this).attr('label')).show(); 
    } 
    }); 
+0

Я пробовал это - однако, поскольку не все опции имеют назначенные метки (только те, которые нуждаются в дополнительном текстовом поле), они не закрывают поля, если после первого show() выбрано другое. – user398341

+0

Вы хотите скрыть все div, когда выбраны параметры без атрибута метки? –

+0

все div, которые относятся к этому конкретному меню - да. – user398341