Как заполнить поле выбора значениями из базы данных по событию onchange другого поля выбора и без обновления страницы или отправки формы? - PullRequest
Новая
       2

Как заполнить поле выбора значениями из базы данных по событию onchange другого поля выбора и без обновления страницы или отправки формы?

0 голосов
/ 20 июля 2011

У меня есть HTML-форма на странице php.Демонстрационный код выглядит следующим образом. 

<html>
<head>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
<br>
<select name="job" >
</select>
<br>
<input name="salary" type="text">
<br>
<input name="Submit" type="submit" value="Submit">
</form>
<br>
</body>
</html>

В приведенной выше форме после нажатия кнопки отправки выполняется некоторый проверочный код в javascript, а после проверки форма передается программно с использованием сценария java.

Требованиекогда я выбираю значение из первого поля выбора;второе поле выбора должно быть заполнено некоторыми значениями.Эти значения во втором окне выбора поступают из базы данных.Поскольку я ничего не знаю в AJAX, но я хочу добиться этого, используя AJAX и javascript / jquery, потому что всякий раз, когда я выбираю какое-либо значение из первого поля выбора, форма не должна отправляться или страница не должна обновляться, только второе поле выбора заполняетсяновые значения из базы данных.

Пожалуйста, помогите мне в решении этой проблемы.Спасибо!

1 Ответ

0 голосов
/ 20 июля 2011

HTML 

<select id="job" name="job" >
</select>

JQuery 

function showUser(value){

        $("#job").get(0).options.length = 0;
        $("#job").get(0).options[0] = new Option("Loading jobs", "-1"); 

        $.ajax({
            type: "POST",
            url: "Default.aspx/GetJobs",
            data: "{userID:" + value+ "}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(msg) {
                $("#job").get(0).options.length = 0;
                $("#job").get(0).options[0] = new Option("Select job", "-1"); 

                $.each(msg.d, function(index, item) {
                    $("#job").get(0).options[$("#job").get(0).options.length] = new Option(item.Display, item.Value);
                });
            },
            error: function() {
                $("#job").get(0).options.length = 0;
                alert("Failed to load jobs");
            }
        });
}

взято отсюда

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...