Отображение контента в зависимости от выбора в select

@Tankobratec · Регистрация: 03.12.2014

Author24 — интернет-сервис помощи студентам

Такая ситуация есть views на ней 3 таблици и select, взависимости от значения select нужно отображать необходимую таблицу, я решил это сделать на js вот моя реализация

Javascript

function get(id) { return document.getElementById(id) }
function myfunc() {
    value = get('Type_Service');
    switch (value) {
        case "Лікування":
            document.getElementById("Лікування").style.visibility = "visible";
            document.getElementById("Профілактика").style.visibility = "hidden";
            document.getElementById("Діагностика").style.visibility = "hidden";
            break
        case "Профілактика":
            document.getElementById("Лікування").style.visibility = "hidden";
            document.getElementById("Профілактика").style.visibility = "visible";
            document.getElementById("Діагностика").style.visibility = "hidden";
            break
        case "Діагностика":
            document.getElementById("Лікування").style.visibility = "hidden";
            document.getElementById("Профілактика").style.visibility = "hidden";
            document.getElementById("Діагностика").style.visibility = "visible";
            break
    }
}

Вот как я подключаю

C#

@Html.DropDownList("Type_Service", ViewBag.Type_Service as SelectList, new { @onclick="myfunc"})
@section Scripts {
   @Scripts.Render("~/java.js")
}

Помогите потому-что не роботает, может не правильно использую свой скрипт?

@sau · 29.02.2016, 23:45

Сообщение от Tankobratec

return document.getElementById(id)

здесь вернется dom элемент , а не его выбранное значение
ну и подписываться нужно на событие onchange

@Tankobratec · 01.03.2016, 02:00 **[ТС]**

а как определить выбраное значения не подскажите?

Добавлено через 17 минут
вот вроде поставил на onchange
@Html.DropDownList("Type_Service", ViewBag.Type_Service as SelectList, new { @onchange="myfunc"})
Плюс исправил ошибку в js действительно я не обращялся к значению елемента
И добавил алерт для проверки срабатывает ли скрипт

Javascript

function get(id) { return document.getElementById(id) }
function getVal(id) { return get(id).value}
function myfunc() {
    
    value = getVal('Type_Service');
    alert(value);
    switch (value) {
        case "Лікування":
            document.getElementById("Лікування").style.visibility = "visible";
            document.getElementById("Профілактика").style.visibility = "hidden";
            document.getElementById("Діагностика").style.visibility = "hidden";
            break
        case "Профілактика":
            document.getElementById("Лікування").style.visibility = "hidden";
            document.getElementById("Профілактика").style.visibility = "visible";
            document.getElementById("Діагностика").style.visibility = "hidden";
            break
        case "Діагностика":
            document.getElementById("Лікування").style.visibility = "hidden";
            document.getElementById("Профілактика").style.visibility = "hidden";
            document.getElementById("Діагностика").style.visibility = "visible";
            break
    }
}

Но алерт не появляеться и я не могу найти свою ошибку...

@Tankobratec · 02.03.2016, 16:25 **[ТС]**

Проблема была вот тут @Html.DropDownList("Type_Service", ViewBag.Type_Service as SelectList, new { @onchange="myfunc()"})
И ище может кому-то нужно будет переписано на JQuery

Javascript

$(document).ready(function () {
    $('#Профілактика').hide();
    $('#Лікування').show();
    $('#Діагностика').hide();
    $('#Type_Service').change(function () {
        var str = "";
        str = $('#Type_Service').val();
        switch (str) {
            case 'Лікування':
                $('#Профілактика').hide();
                $('#Лікування').show();
                $('#Діагностика').hide();
                break;
            case 'Профілактика':
                $('#Профілактика').show();
                $('#Лікування').hide();
                $('#Діагностика').hide();
                break;
            case 'Діагностика':
                $('#Профілактика').hide();
                $('#Лікування').hide();
                $('#Діагностика').show();
                break;
        }
    });
});

Тему можна считать закрытой.

@sau 2735 / 2041 / 380 Регистрация: 22.07.2011 Сообщений: 7,731
	29.02.2016, 23:45	2
	Сообщение от Tankobratec return document.getElementById(id) здесь вернется dom элемент , а не его выбранное значение ну и подписываться нужно на событие onchange 0

	02.03.2016, 16:25