Как подать заявку на изменение выпадающего списка?


293

Я создаю страницу в JSP, где у меня есть раскрывающийся список, и как только пользователь выбирает значение, он должен нажать на кнопку «Перейти», а затем значение отправляется сервлету.

            </select>
            <input type="submit" name="GO" value="Go"/>

Как мне сделать так, чтобы он делал это при изменении? Например, когда пользователь выбирает Джона, все его данные извлекаются из БД и отображаются. Я хочу, чтобы система делала это без необходимости нажимать кнопку «Перейти».

Ответы:


662

Просто попросите помощи у JavaScript.

<select onchange="this.form.submit()">
    ...
</select>

Смотрите также:


6
Многие пользователи блокируют JavaScript, есть ли способ сделать это без JavaScript?
deweydb

5
@deweydb: Нет. В противном случае я бы ответил на это :) Просто покажите <noscript>баннер, что опыт сайта лучше, если JS включен. Совершенно другая альтернатива заключается в использовании <ul><li><input type="submit">и добавлении загрузки CSS, чтобы он выглядел как настоящий выпадающий список. Но тогда уже нет средств <select>.
BalusC

89
@deweydb "Многие пользователи блокируют JavaScript ..." Цитата? Я, честно говоря, никогда не сталкивался с пользователем, который блокирует JavaScript, - я начал верить, что эти пользователи - миф. Это помешало бы им использовать половину интернета, с одной стороны; и любой достаточно опытный, чтобы блокировать сценарий, вероятно, знает, насколько он безобиден и вездесущ.
Натан Хорнби

7
@BalusC, пожалуйста, добавьте это для людей, которые беспокоятся о том, что пользователи не имеют включенного javascript. <noscript>This form requires that you have javascript enabled to work properly please enable javascript in your browser.</noscript> @NathanHornby, если вам действительно нужна цитата, почему вы не ходите в блочный javascript большинства публичных библиотек по соображениям безопасности, а также в некоторые школы, так что не делайте ' не пытайтесь выдать его за миф, который у него есть и делается в основном из соображений безопасности, чтобы сохранить целостность компьютеров, так как некоторые javascript - это вредоносный код ...
Belldandu

10
@deweydb Все просто. Просто вставьте submitкнопку в <noscript>теги. Это покажет только если пользователи используют noscript. Пользователи, у которых включен JS, могут просто выбрать элемент, а пользователи с noscript просто нажмут кнопку отправки. :)
Аарон Исав

81

Простой JavaScript подойдет -

<form action="myservlet.do" method="POST">
    <select name="myselect" id="myselect" onchange="this.form.submit()">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
        <option value="4">Four</option>
    </select>
</form>

Вот ссылка на хороший учебник по JavaScript .


Спасибо! Выше тоже работал для MVC @using (Html.BeginForm ("Actioname", "controllername", FormMethod.Post)) <select name = "myselect" id = "myselect" onchange = "this.form.submit () "> <option value =" 1 "> One </ option> <option value =" 2 "> Two </ option> <option value =" 3 "> Three </ option> <option value =" 4 " > Четыре </ option> </ select>
Чарулата Кришнамурти

11

кроме использования this.form.submit()вы также отправляете по идентификатору или имени. Пример у меня есть форма, как это:<form action="" name="PostName" id="IdName">

  1. По имени : <select onchange="PostName.submit()">

  2. По идентификатору: <select onchange="IdName.submit()">


JavaScript не требуется!
MikeyE

я думаю, что submit () является элементом HTML. не JavaScript CMIIW
Sate Wedos

Я знаю, что я имел в виду под моим комментарием. Я пытался дать вам несколько реквизитов. :-)
MikeyE

Подождите, это серьезно не JavaScript?
Джеймс Хауг

10
Все, что написано внутри * атрибутов, интерпретируется как Javascript. Таким образом, PostName.submit () является JavaScript.
Асиф Шахзад

9

Для тех, кто в ответе выше. Это определенно JavaScript. Это просто встроено.

Кстати, эквивалент JQuery, если вы хотите применить ко всем выборам:

$('form select').on('change', function(){
    $(this).closest('form').submit();
});
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.