1

Добрый вечер,дан селект, как получить следующий селект, после заданного селекта, если неизвестен id селекта? Мне нужно в зависимости от выбора первого селекта активировать второй селект. Вот я попробовала, на основе комментария и ответа, не получается...

 <script>
    function SetFilter(id){
        alert(document.getElementById(id).value);
        if (document.getElementById(id).value!='-')
          $("#"+id).nextAll("div select:first").attr('disabled','');
        else
          $("#"+id).nextAll("div select:first").attr('disabled','disabled');
    }
    </script>
    <div>
        <p class="flabel">Марка</p>
        <select name="PROPERTY_CML2_MARKKA" id="PROPERTY_CML2_MARKKA" onchange="SetFilter(id)">
            <option value="-">-</option>
            <option value="audi">audi</option>
            <option value="audi2">audi2</option>
            <option value="ford">ford</option>
        </select>			
    </div>
    <div>
        <p class="flabel">Модель</p>
        <select name="PROPERTY_CML2_MODEL" id="PROPERTY_CML2_MODEL" onchange="SetFilter(id)">
            <option value="-">-</option><option value="audi 5">audi 5</option>
            <option value="ford model1">ford model1</option>
            <option value="model2">model2</option>
        </select>			
    </div>
    <div>
        <p class="flabel">Год выпуска</p>
        <select name="PROPERTY_CML2_YEAR" id="PROPERTY_CML2_YEAR" onchange="SetFilter(id)">
            <option value="-">-</option>
            <option value="1999">1999</option>
            <option value="2006">2006</option>
        </select>			
    </div>

Что-то не хватает? Мне необходимо следущий селект сделать активным/неактивным

2
  • @Jean-Claude, обновила html код
    – NNN
    28 мар 2016 в 11:52
  • @Jean-Claude, все равно не получается
    – NNN
    28 мар 2016 в 12:17

2 ответа 2

2

Зависит, конечно, от DOM-структуры.

Вот несколько рецептов:

  1. Если элементы следуют строго друг за другом, используйте next(селект).

  2. Если они следуют друг за другом, но разделены другими неоднотипными элементами, то попробуйте nextAll(селект:first) - покажет первый найденный элемент. Если же нужен какой-то НЕпервый, то можно вот так: $(nextAll(селект)->get(номер)).

  3. Можно так же использовать sibling-селекторы.

P.S. Писал по памяти без проверки, подпилите под себя.

1
  • попробовала по-вашему, не получается-(((
    – NNN
    28 мар 2016 в 11:54
1

Ну а если так:

Javascript:

function SetFilter(id){
    // Текущий селект
    var el = $('#' + id);
    // Идентификатор следующиего нужного селекта
    var next = el.attr('data-next-item');

    if (next) {
        if (el.val() !== '-') {
            $("#" + next).removeAttr('disabled');
        } else {
            $("#" + next).attr('disabled', 'disabled');
        }
    }
}

HTML:

<div>
    <p class="flabel">Марка</p>
    <select data-next-item="PROPERTY_CML2_MODEL" id="PROPERTY_CML2_MARKKA" onChange="SetFilter(id)">
        <option value="-">-</option>
        <option value="audi">audi</option>
        <option value="audi2">audi2</option>
        <option value="ford">ford</option>
    </select>
</div>
<div>
    <p class="flabel">Модель</p>
    <select data-next-item="PROPERTY_CML2_YEAR" id="PROPERTY_CML2_MODEL" disabled onchange="SetFilter(id)">
        <option value="-">-</option><option value="audi 5">audi 5</option>
        <option value="ford model1">ford model1</option>
        <option value="model2">model2</option>
    </select>
</div>
<div>
    <p class="flabel">Год выпуска</p>
    <select id="PROPERTY_CML2_YEAR" disabled onchange="SetFilter(id)">
        <option value="-">-</option>
        <option value="1999">1999</option>
        <option value="2006">2006</option>
    </select>
</div>

Суть: указываешь у селекта, каким будет следующий, и обрабатываешь.

Живой пример:

http://codepen.io/bustexz/pen/yOXGqv

4
  • data-next-item- атрибут, который вы придумали? Не думала , что атрибуты можно придумывать....
    – NNN
    29 мар 2016 в 5:52
  • 1
    можно =) Но не совсем просто, все атрибуты должны начинаться с data-. Вот доки htmlbook.ru/samouchitel-html5/atributy-data 29 мар 2016 в 5:55
  • можно и заменить атрибут data-next-item на name,- все работает. Спасибо за бесценные знания!
    – NNN
    29 мар 2016 в 6:10
  • 1
    все можно, просто для хранения мета-данных лучше использовать атрибуты свои. Атрибут name все же зарезервированный, и логика его это - имя текущего элемента, а не следующего. У всего должна быть своя логика) 29 мар 2016 в 6:13

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.