0

Добрый день. Прошу помощи Есть два выпадающих меню. Нужно, чтоб при выборе из первого меню одной строки блокировалась вторая выпадающая менюшка.

Если выбрать Секционные, Сдвижные или Рольставни, то выпадающее меню "Открывать" блокировалась...

Сказали как то через jquery change и disabled сделать... Но я в jq полный ноль :)

<div class="control-group"> 
<div class="control-label">Тип ворот</div> 
<div class="controls"><select name=razmer5>
<option>Секционные</option>
<option>Сдвижные</option>
<option>Распашные</option>
<option>Рольставни</option>
</select>
</div></div>

<div class="control-group"> 
<div class="control-label">Открывать</div> 
<div class="controls"><select name=razmer6>
<option>Внутрь</option>
<option>Наружу</option>
</select>
</div></div>
6
  • Это я просто скопировал текст из файла шаблона .tpl. У меня он тоже работает, если bp txt сделать html...
    – bucha
    13 дек 2013 в 11:04
  • Ну этот код работает, но не так)) вторая менюшка теперь всегда заблокирована...
    – bucha
    13 дек 2013 в 11:20
  • Ох, только что проверил еще раз. Все работает как надо. Проверяйте, как подключили этот код к себе. Готовая страничка: rghost.ru/50937130
    – VenZell
    13 дек 2013 в 11:52
  • Да, так все работает. Но почему то на самом сайте, вторая менюшка всегда заблокирована...
    – bucha
    13 дек 2013 в 13:04
  • Если все подключено точно так же, как в файле, то все будет работать. 1) Проверьте отсутствие ошибок в консоли браузера 2) Проверьте, загружается ли у вас библиотека jQuery 3) Проверьте, есть ли вызов функции на событии onchange у первого select (последние 4 строки моего ответа)
    – VenZell
    13 дек 2013 в 13:37

1 ответ 1

4

Рабочий пример на jsFiddle

--Доработал ответ, учитывая комментарии задавшего вопрос. Данный код полностью рабочий в состоянии "как есть".

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
    function pleaseSwitch(obj) {
        var gate_type = $(obj).val(),
        select = $("select[name='razmer4']");
        if (gate_type === 'Распашные') {
            select.prop('disabled', false);
        } else {
            select.prop('disabled', 'disabled');
        }
    }
</script>
<div class="control-group">
    <div class="control-label">Тип ворот</div>
    <div class="controls">
        <select name="razmer5" onchange="pleaseSwitch(this);">
            <option>Секционные</option>
            <option>Сдвижные</option>
            <option>Распашные</option>
            <option>Рольставни</option>
        </select>
    </div>
</div>
<div class="control-group">
    <div class="control-label">Открывать</div>
    <div class="controls">
        <select name="razmer4" disabled>
            <option>Внутрь</option>
            <option>Наружу</option>
        </select>
    </div>
</div>

Обратите особое внимание на эти две строчки:

<select name="razmer4" disabled>

и

<select name="razmer5" onchange="pleaseSwitch(this);">
7
  • Извиняюсь... Но как это подключать? :)
    – bucha
    13 дек 2013 в 10:20
  • @bucha, в тэге head сначала подключаешь сам JQuery. Например, с официального сайта: <script src="code.jquery.com/jquery-latest.js"></script> А ниже, в другой тэг script, вставляешь приведенный ниже код.
    – andreyqin
    13 дек 2013 в 10:23
  • rghost.ru/private/50935584/8ce9b567ef126192b10434978fa72468 так сделал, не получается :( и на сайте для этих менюшек прописан стиль, может из-за этого еще?...
    – bucha
    13 дек 2013 в 10:32
  • @bucha, второй тэг скрипт, в котором содержится код, тоже должен находится в тэге head
    – andreyqin
    13 дек 2013 в 10:40
  • Если так, то тоже не работает... :( <head> <script src="code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function() { $("select[name='razmer5']").change(function () { var gate_type = $(this).val(), select = $("select[name='razmer4']"); if (gate_type === 'Распашные') { select.prop('disabled', false); } else { select.prop('disabled', 'disabled'); } }); }); </script> </head>
    – bucha
    13 дек 2013 в 10:41

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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