При выборе значения select изменить значения в другом select-e

274

10 декабря 2016, 10:29

Добрый день! Возникла проблема с реализацией такой, что если выбрать значение в одном selecte, то изменяться значения в другом. К примеру, есть список отделений больницы и при выборе конкретного отделения в select, то выводятся доктора именно этого отделения. Суть заключается в том, что если выбрать значение в select отделений, а потом отослать на сервлет, для того чтобы поменяло значение в select докторов, то список конкретных докторов меняется, а значение селекта отделений возвращается на начальный. Вопрос: как реализовать это так, чтобы после отправки формы на сервлет и отображения селекта с конкретными докторами, значение первого селекта не изменялось?

Вот мой код:

<form class="form-horizontal" action="controller" method="POST">
    <input type="hidden" name="command" value="insertNewReception"/>
    Отделение: <select class="selectpicker">
        <option  onclick="location.href='/Task/controller?command=listCategory&category=neurologCategory&reception=new';">
            <c:if test="${category=='Невропатологическое'}">
                <c:out value="${category}"></c:out>
            </c:if>
        </option>
        <option onclick="location.href='/Task/controller?command=listCategory&category=oftalmologCategory&reception=new';">
            <c:if test="${category=='Офтальмологическое'}">
                <c:out value="${category}"></c:out>
            </c:if>
        </option>
        <option onclick="location.href='/Task/controller?command=listCategory&category=pediatrCategory&reception=new';">
            <c:if test="${category=='Детское'}">
                <c:out value="${category}"></c:out>
            </c:if>
        </option>
        <option onclick="location.href='/Task/controller?command=listCategory&category=terapevtCategory&reception=new';">
            <c:if test="${category=='Терапевтическое'}">
                <c:out value="${category}"></c:out>
            </c:if>
        </option>           
    </select>
    Врач: <select class="selectpicker">
    <c:forEach var="doctor" items="${listCategoryDoctors}">
        <option>${doctor.lastName}</option>
    </c:forEach>        
    </select>
        <button type="submit" class="btn btn-primary">Записать</button>
    <br/>
</form>

Буду рад любому ответу!

Answer 1

Во-первых, не стоит изменения в первом select фиксировать в onclick у элементов option. Это неверный подход. Я, к примеру, зачастую выбираю значения в выпадающих списках с помощью клавиатуры и ваш onclick не сработает.

Нужно использовать именно для этого и предназначенное событие change на элементе select: http://htmlbook.ru/html/attr/onchange

Во-вторых, я порекомендовал бы использовать для получения значений второго select ajax-запрос, который произведет получение данных и перерисовку select без обновления страницы.

Но если вам не хочется что-то сильно менять в логике работы - нужно просто передавать текущее выбранное в первом select значение на вторую страницу, где соответствующему option выставлять аттрибут selected.

В вашем случае, код будет примерно таким:

<form class="form-horizontal" action="controller" method="POST">
    <input type="hidden" name="command" value="insertNewReception"/>
    Отделение: <select class="selectpicker" onchange="location='/Task/controller?command=listCategory&category='+this.value+'&reception=new'">
        <option value="neurologCategory" ${param.category == "neurologCategory" ? 'selected="selected"' : ''}>
            <c:if test="${category=='Невропатологическое'}">
                <c:out value="${category}"></c:out>
            </c:if>
        </option>
        <option value="oftalmologCategory" ${param.category == "oftalmologCategory" ? 'selected="selected"' : ''}>
            <c:if test="${category=='Офтальмологическое'}">
                <c:out value="${category}"></c:out>
            </c:if>
        </option>
        <option value="pediatrCategory" ${param.category == "pediatrCategory" ? 'selected="selected"' : ''}>
            <c:if test="${category=='Детское'}">
                <c:out value="${category}"></c:out>
            </c:if>
        </option>
        <option value="terapevtCategory" ${param.category == "terapevtCategory" ? 'selected="selected"' : ''}>
            <c:if test="${category=='Терапевтическое'}">
                <c:out value="${category}"></c:out>
            </c:if>
        </option>
    </select>
    Врач: <select class="selectpicker">
        <c:forEach var="doctor" items="${listCategoryDoctors}">
            <option>${doctor.lastName}</option>
        </c:forEach>
    </select>
    <button type="submit" class="btn btn-primary">Записать</button>
    <br/>
</form>

Насчет части ${param.category == "terapevtCategory" ? 'selected="selected"' : ''} не уверен, малознаком с синтаксисом, но надеюсь поправите, если есть ошибка.