Форум

MaximS · #1 (**permalink**) 23.12.2013, 14:52

Здравствуйте!
Вот такая ситуация есть связанные селекты Страна -Город -Район,
В JS не разбираюсь.

Подскажите пожалуйста как сделать так чтобы значения value Района записывались в переменную для последующих арифметических действий с ней(с переменной), но в тоже время чтобы эта переменная сразу обновляла значение если выбирается другой Район для уже выбранного Города, и обновлялась даже если будет выбран другой город. И это все без перезагрузки страницы. Спасибо!

MaximS · #2 (**permalink**) 23.12.2013, 15:39

<body onLoad="calc2(); setTimeout ('document.forms.myForm.select3.options [0].checked = true; document.forms.myForm.select7.options [0].checked = true; document.forms.myForm.select8.options [0].checked = true;')">
<FORM name="myForm">
<select name="select1" id="select1" onchange="change_select(this)">
<option value="">Страна</option>
<option value="rus">RUS</option>
<option value="ino">INO</option>
</select>

<select name="select2" id="select2" onchange="change_select(this)" style="display:none">
<option value="">Город RUS</option>
<option value=2001>Москва</option>
<option value=2002>Сочи</option>
<option value=2003>Нижний Новгород</option>
</select>

<select name="Select3" id="select3" onchange="change_select(this)" style="display:none">
<option value=0 selected>Город INO</option>
<option value=3004>NYC</option>
<option value=3005>Washington</option>
</select>

<select name="select4" id="select4" onchange="change_select(this)" style="display:none">
<option value="">Район МОСКВА</option>
<option value=4001 >Район МОСКВА 1</option>
<option value=4002>Район МОСКВА 2</option>
<option value=4003>Район МОСКВА 3</option>
</select>

<select name="select5" id="select5" onchange="change_select(this)" style="display:none">
<option value="">Район СОЧИ </option>
<option value="5001">Район СОЧИ 1</option>
<option value="5002">Район СОЧИ 2</option>
<option value="5003">Район СОЧИ 3</option>
</select>

<select name="select6" id="select6" onchange="change_select(this)" style="display:none">
<option value="">Район Нижний Новгород</option>
<option value="6001">Район Нижний Новгород 1</option>
</select>

<select name="Select7" id="select7" onChange="document.getElementById('massivea').inne rHTML=select7.value;calc2();" style="display:none">
<option value=0 selected="selected">Район NYC</option>
<option value=1>Район NYC 1</option>
<option value=2>Район NYC 2</option>
<option value=3>Район NYC 3</option>
<option value=1>Район NYC 4</option>
<option value=2>Район NYC 5</option>
<option value=1>Район NYC 6</option>
<option value=1>Район NYC 7</option>
<option value=1>Район NYC 8</option>
<option value=2>Район NYC 9</option>
<option value=2>Район NYC 10</option>
<option value=2>Район NYC 11</option>
<option value=1>Район NYC 12</option>
</select>

<select name="Select8" id="select8" onChange="document.getElementById('massivea').inne rHTML=select8.value;calc2() ;" style="display:none">
<option value=0 selected="selected">Район Washington 1</option>
<option value=3>Район Washington 1</option>
<option value=3>Район Washington 2</option>
<option value=2>Район Washington 3</option>
<option value=2>Район Washington 4</option>
<option value=3>Район Washington 5</option>
<option value=2>Район Washington 6</option>
</select>
</FORM>
<script type="text/javascript">

function change_select(elem) {
switch (elem.value) {
case 'rus':
document.getElementById('select8').style.display= 'none';
document.getElementById('select7').style.display= 'none';
document.getElementById('select6').style.display= 'none';
document.getElementById('select5').style.display= 'none';
document.getElementById('select4').style.display= 'none';
document.getElementById('select3').style.display= 'none';
document.getElementById('select2').style.display = 'inline';
break;

case 'ino':
document.getElementById('select8').style.display= 'none';
document.getElementById('select7').style.display= 'none';
document.getElementById('select6').style.display= 'none';
document.getElementById('select5').style.display= 'none';
document.getElementById('select4').style.display= 'none';
document.getElementById('select3').style.display= 'inline';
document.getElementById('select2').style.display = 'none';
break;

case '2001':
document.getElementById('select8').style.display= 'none';
document.getElementById('select7').style.display= 'none';
document.getElementById('select6').style.display= 'none';
document.getElementById('select5').style.display= 'none';
document.getElementById('select4').style.display= 'inline';
document.getElementById('select3').style.display= 'none';
document.getElementById('select2').style.display = 'inline';
break;

case '2002':
document.getElementById('select8').style.display= 'none';
document.getElementById('select7').style.display= 'none';
document.getElementById('select6').style.display= 'none';
document.getElementById('select5').style.display= 'inline';
document.getElementById('select4').style.display= 'none';
document.getElementById('select3').style.display= 'none';
document.getElementById('select2').style.display = 'inline';
break;

case '2003':
document.getElementById('select8').style.display= 'none';
document.getElementById('select7').style.display= 'none';
document.getElementById('select6').style.display= 'inline';
document.getElementById('select5').style.display= 'none';
document.getElementById('select4').style.display= 'none';
document.getElementById('select3').style.display= 'none';
document.getElementById('select2').style.display = 'inline';
break;

case '3004':
document.getElementById('select8').style.display= 'none';
document.getElementById('select7').style.display= 'inline';
document.getElementById('select6').style.display= 'none';
document.getElementById('select5').style.display= 'none';
document.getElementById('select4').style.display= 'none';
document.getElementById('select3').style.display= 'inline';
document.getElementById('select2').style.display = 'none';
break;

case '3005':
document.getElementById('select8').style.display= 'inline';
document.getElementById('select7').style.display= 'none';
document.getElementById('select6').style.display= 'none';
document.getElementById('select5').style.display= 'none';
document.getElementById('select4').style.display= 'none';
document.getElementById('select3').style.display= 'inline';
document.getElementById('select2').style.display = 'none';
break;

break;

default:
// document.getElementById('select2').style.display = 'none';
// document.getElementById('select3').style.display = 'none';
// document.getElementById('select4').style.display= 'none';
// document.getElementById('select5').style.display= 'none';
// document.getElementById('select6').style.display= 'none';
// document.getElementById('select7').style.display= 'none';
// document.getElementById('select8').style.display= 'none';
}
}

</script>

<script language=JavaScript>

function calc2(){
var ttt= document.getElementById('text');
ttt.value='';

var indexgruppa=document.getElementById('select8').val ue;

var modela=indexgruppa;
modela = Math.round(modela);
ttt.value = ttt.value + 'Значение переменной';
ttt.value = ttt.value + modela;
ttt.value = ttt.value + ' индекс';
document.getElementById('res').value=modela;

};

</script>

<tr>

<td class="right_osago"><font size="2">Значение value = <span id='massivea'>1</span></font></td>
<td><font size="2">
<INPUT style="border:#ffffff 1px solid; text-align: left; color:#CC0000;" size=5 name=res id="res">
</font></td>
</tr>

MaximS · #3 (**permalink**) 23.12.2013, 16:50

это конец кода пардон не весь был

<script type="text/javascript" src="data.js"></script>
<form action='index.php' method="post">
<textarea id='text' name='message' cols="60" rows="10"></textarea></span>
<br>
<input type="hidden" name="hidden" value="ok"><br>
</form>
</body>

Так вот Ситуация такая: выбираю Страна- INO, Город - Washington, Район - Район Washington 5 после чего переменная indexgruppa принимает значение <option value=3>Район Washington 5</option> то есть равно 3 после чего переменная indexgruppa передает значение modela нужно чтобы после того как я выберу без перезегрузки страницы другой город и соответственно другой район переменная modela обновилась, то есть она должна принять другое значение,а сейчас при смене города значение остается старым то есть равно 3

Rise · #4 (**permalink**) 23.12.2013, 21:46

MaximS,

.....
<select name="select8" id="select8" onchange="calc2(this)"> <!-- всем select районов сделать так -->
.....

<label>Значение value = </label><input id="res" type="text" style="border:0;color:red;" readonly>

<script>
function calc2(elem) {
	document.getElementById('res').value = elem.value;
}
</script>

MaximS · #5 (**permalink**) 24.12.2013, 08:56

Работает! спасибо большое!

Форум

Справочник

Discord чат

Курсы javascript