Как с помощью события onchange select, заполнить сразу 3 input?

Question

[vss96]

Совершенно недавно начал изучать ASP.NEt MVC, собираюсь сделать веб интерфейс расчета. Имеется база данных SQL(локальная) из которой в тэг select передаю названия городов и соответствующие тепловые характеристики(T_ext,Z_ht,T_ht) с помощью цикла foreach и ViewBag, в котором храню данные. Так вот, мне необходимо по onchange в selecte заполнить соответствующими данными три поля input.
Пробовал с помощью getelementbyid, получается вывести значение только одного параметра в один input.
Сам select:

Выберите город,в котором планируете строительство:
        <select id="select" onchange="">
            <option selected="selected">Выберите город</option>
            @foreach (var b in ViewBag.cities)
            {
                <option>@b.Name</option>
            }
        </select>

В ViewBag.cities содержаться данные вида:
db.cities.Add(new Cities { Name = "Нижний Новгород", T_ext=-31, T_ht=215, Z_ht=-4.1 });
db.cities.Add(new Cities { Name = "Ростов на дону", T_ext = -22, T_ht = 171, Z_ht = -0.6 });
db.cities.Add(new Cities { Name = "Таганрог", T_ext = -22, T_ht = 167, Z_ht = -0.4 });

Comments

[vss96]

Решил вопрос частично с помощью eRKa, использование Newtonsoft.JSON помогло. Только обработчик впихнул в отдельный файл.

Answer 1

[eRKa]

На сервере

<select id="select">
	<option selected="selected">Выберите город</option>
	@foreach (var b in ViewBag.cities)
	{
		<option value='@JsonConvert.SerializeObject(b)'>@b.Name</option>
	}
</select>

На клиенте

$('#select').change(function(){
	var $val = $(this).find('option:selected').val();
	if(!$val) return;
	var obj = JSON.parse($val); // здесь js объект с вашими полями
	// и здесь его можно обработать и заполнить свои инпуты
	var t_ext = obj.T_ext;
	var t_ht = obj.T_ht;
	var z_ht = obj.Z_ht;

	$('input#T_ext').val(t_ext);  // Добавил исходя из Ваших комментариев других ответов
	$('input#Zht').val(t_ht);
	$('input#Tht').val(z_ht);
});

Comments

[vss96]

На клиенте... Задаю глупые вопросы, но в asp.net клиентом что является?

[eRKa]

vss96, страница view формируется на стороне сервера и код в разметке razor будет выполняться на стороне сервера. JS код и css являются статическими файлами и отдаются сервером как есть и js будет выполняться браузером на стороне клиента. И когда я сказал "на клиенте", я имел ввиду в js коде. Думаю, вы загуглите, как js подключается к вьюшке.

[vss96]

eRKa, Добавил ссылку на свой js:

<script src="@Url.Content("~/Scripts/jquery-1.10.2.min.js")" type="text/javascript"></script>

Все прошло,только значения пустые, ничего не выводит
и это поле он не знает, когда так прописываю,

<option value='@JsonConvert.SerializeObject(b)'>@b.Name</option>

изменяя на это:

<option id="opt" value="JsonConvert.SerializeObject(@b)">@b.Name</option>

ошибка пропадает.

[eRKa]

vss96, Конечно пропадет. Вам нужно изучит razor синтаксис и что он делает. Символ @ в разоре выделяет C# код, который выполнится на стороне сервера и результат вернет в разметку. Когда Вы пишите @JsonConvert.SerializeObject(b), то C# код начнется с @JsonConvert, а в Вашем варианте он будет только строкой html разметки.
JsonConvert это метод для конвертирования C# объектов в json строку и он является методом сторонней библиотеки newtonsoft. Чтобы ее использовать в проекте, ее нужно добавить через nuget и во вьюшке добавить на нее ссылку @using Newtonsoft.Json.

И в примере добавления ссылки я вижу, что Вы добавили jQuery, а не свой js файлик. Но свой скрипт можно добавить прямо на вьюшке, после html разметки, только не забудьте его обрамить в тег <script></script>

[vss96]

eRKa, @using Newtonsoft.Json во View не подключается

[eRKa]

vss96,

Чтобы ее использовать в проекте, ее нужно добавить через nuget

Добавьте ее в проект через nuget manager.

Answer 2

[Дмитрий Ковальский]

У вас все option с одинаковым значением value. Так, для справки. А теперь мой ключевой вопрос - а что происходит в событии onchange, которое вы тут не показали? Предположим у вас есть option:selected. А что вы оттуда берете? название? Или вы хотите на клиентской стороне по названию из ViewBag достать еще какие-то значения? У меня для вас плохие новости - так делать нельзя и на 99% я уверен что невозможно. Это серверный объект.

Comments

[vss96]

по onchange на select я навешивал getElementByID(здесь айди инпута 1го).value=value и брал единственное значение. Так как я делаю одностраничный расчетный сайт, мне понадобилось выводить сразу три, поэтому код который заведомо неправильный я не стал писать.

[vss96]

Можно ли у вас получить онлайн консультацию, по скайпу например, просто необходимость появилась выполнить данное решение, сам провозился 24часа и пришел к выводу,что сделать не смогу.

[Дмитрий Ковальский]

vss96, вам нужно просто дописать следующее -

@foreach (var b in ViewBag.cities)
            {
                <option value="something">@b.Name</option>
            }

И вместо something написать какое-то осмысленное значение.

Затем в onchange вместо getElementById - вызвать getelementbyselector("#select option:selected"), в value которого будет то что вы написали вместо something

[vss96]

Дмитрий Ковальский,

<select id="select"  onchange="document.getElementBySelector('#select option:selected').value=value">
            <option selected="selected">Выберите город</option>
            @foreach (var b in ViewBag.cities)
            {
            <option id="opt" value="@b.T_ext,@b.T_ht,@b.Z_ht">@b.Name</option>
            }
        </select>

Я правильно понял, что оно запишет сразу 3 этих значения? И как мне их потом вытащить в три разных input?

<p>Расчетная температура воздуха <font color="red">t<sub>ext</sub>:</font><input id="T_ext" value="" /> </p>
    <p>Продолжительность отопительного периода <font color="red">Z<sub>ht</sub>:</font><input id="Zht" value="" /> </p>
    <p>Средняя температура за отопительный период<font color="red">t<sub>ht</sub>:</font><input id="Tht" value="" /> </p>

[Дмитрий Ковальский]

vss96, Например:
1)На строке сделать split через запятую.
2) вместо value, можно использовать data-атрибуты.
Например

<option id="opt" data-t_ext="@b.T_ext" data-t_ht = "@b.T_ht" data-z_ht = "@b.Z_ht">@b.Name</option>

а обращаться можно как getelementbyselector("#select option:selected").dataset.t_ext(или t_ht и т.д.)

[vss96]

мое приложение его не распознает, говорит, что такого не существует

Answer 3

[Константин Боровик]

Если я правильно вас понял вы не можете взять сразу три значения? Если да, то для вас есть несколько вариантов решений:
1. в каждый тег option записывать три скрытых поля input, которые будут содержать эти значения:

<option>Город <input type=hidden name="T_ext" value="..."><input type=hidden name="T_ht" value="..."><input type=hidden name="Z_ht" value="..."></option>

При событии onchange вы просто смотрите какой элемент был выбран и берёте значения из скрытых полей.
2. вариант через js массив. создаёте массив объектов и запихиваете в него все значения. далее у каждого option ставите value, который будет соответствовать элементу массива. ну и при событии onchange берёте value и по индексу вытаскиваете объект массива.
Больше мог бы сказать, если бы вы предоставили своё событие onchange и те input поля, о которых идёт речь.

Comments

[vss96]

Событие onchange:

<select id="selected" onchange="getElementByID('T_ext').value=value">
<option selected="selected">Выберите город</option>
            @foreach (var b in ViewBag.cities)
            {
                <option id="opt" value='T_ext'>@b.Name</option>
            }
        </select>

Это input поля,которые необходимо заполнить

<p>Расчетная температура воздуха <font color="red">t<sub>ext</sub>:</font><input id="T_ext" value="" /> </p>
    <p>Продолжительность отопительного периода <font color="red">Z<sub>ht</sub>:</font><input id="Zht" value="" /> </p>
    <p>Средняя температура за отопительный период<font color="red">t<sub>ht</sub>:</font><input id="Tht" value="" /> </p>

[Константин Боровик]

vss96, значит берёте мой второй вариант, массив объектов:

<script>
array = [{T_ext: ..., T_ht: ...,Z_ht: ... }, ...]
document.getElementById('select').onchange = function () { 
var objArr = array[this.value]; 
// далее просто забиваете значения в нужные поля.
};
</script>
<select id='select'>
<option value='0'></option>
<option value='2'></option>
<option value='3'></option>
...
</select>