Выбор по select - JavaScript, Ajax

spoon100500 · 23.03.2017, 13:41

Подскажите пожалуйста, как сделать выборку из id="combobox3" так чтобы А и В рассчитывались по ширине т.е. значение value подставлялось в var a. С и D рассчитывались по высоте т.е. значение value подставлялось в var b.

Код HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    </head>
<body>
 
<input type="number" id="editbox1" value="0"><!--Ширина-->
<input type="number" id="editbox2" value="0"><!--Высота-->
<div id="wb_rezult">
<span><strong><em>Результат</em></strong></span></div><!--Результат-->
 
<select size="1" id="combobox3"><!--combobox3-->
<option value="2190, 2648">А</option><!--по ширине-->
<option value="2350, 2823">В</option><!--по ширине-->
<option value="2490, 2997">С</option><!--по высоте-->
<option value="1190, 1450">Р</option><!--по высоте-->
</select>
<script>
var sel_f;
var intp_a, intp_b;
var a, b, l, f;
var rezult = 0;
var rezult_out = 0;
 
sel_f = document.querySelector('#combobox3');
 
intp_a = document.getElementById('editbox1');//ширина
intp_b = document.getElementById('editbox2');//высота
rezult_out = document.getElementById('wb_rezult');//результат
 
a = parseFloat(intp_a.value);
b = parseFloat(intp_b.value);
f = parseFloat(intp_f.value);
 
sel_f.addEventListener("change", myFunc3);
intp_a.addEventListener("change", myFunc3); 
 
function printValues() {
    var out = rezult;
    rezult_out.innerHTML = out;
};
function myFunc3() {//функция расчета
что то типо этого
if('A' && 'B' === sel_f.value) {l = a;}
else {l = b}
rezult = (l * f ).toFixed(2);
 
printValues();
    
};
</script>
</body>
</html>

Serge_Bliznykov · 23.03.2017, 14:40

Вы такое хотели получить?

Код:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    </head>
<body>
 
<input type="number" id="editbox1" value="0"><!--Ширина-->
<input type="number" id="editbox2" value="0"><!--Высота-->
<div id="wb_rezult">
<span><strong><em>Результат</em></strong></span></div><!--Результат-->
 
<select size="1" id="combobox3"><!--combobox3-->
<option value="2190, 2648">А</option><!--по ширине-->
<option value="2350, 2823">В</option><!--по ширине-->
<option value="2490, 2997">С</option><!--по высоте-->
<option value="1190, 1450">Р</option><!--по высоте-->
</select>
<script>
  var f = 0.5;//parseFloat(intp_f.value);
  var rezult_out = document.getElementById('wb_rezult');//результат
 
  document.getElementById('combobox3').addEventListener("change", myFunc3);
  document.getElementById('editbox1').addEventListener("change", myFunc3); 
  document.getElementById('editbox2').addEventListener("change", myFunc3); 
 

function printValues(mytext) {
    rezult_out.innerHTML = mytext;
};

function myFunc3() {//функция расчета
  var cb3 = document.getElementById('combobox3').value;
  var a = parseFloat(document.getElementById('editbox1').value);
  var b = parseFloat(document.getElementById('editbox2').value);
  var result = f;

  switch (cb3) {
	case "2190, 2648":
	case "2350, 2823":
		result*=a;
		break;

	case "2490, 2997":
	case "1190, 1450":
		result*=b;

  }
  printValues(result);
    
};
</script>
</body>
</html>

spoon100500 · 23.03.2017, 16:26

Ну типа этого, да)) спасибо, буду привязывать к своему коду.

Serge_Bliznykov · 23.03.2017, 16:35

Пожалуйста.
Успехов в привязке.

Будут ещё вопросы - обращайтесь!

spoon100500 · 24.03.2017, 06:47

Подскажите, если установить в option combobox3, что то типа якоря например * и по ней производить поиск т.е. где * расчет по ширине. Как прикрутить этот якорь?
Просто если select состоит из сотни option перечислять их все придется в case, не вариант))).

Код HTML:

switch (cb3) {
	case "*":
		result*=a;
		break;

		result*=b;
  }

Serge_Bliznykov · 24.03.2017, 10:23

если я правильно понял, то попробуйте использовать дополнительный аттрибут в option.

например, так:

Код:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    </head>
<body>
 
<input type="number" id="editbox1" value="0"><!--Ширина-->
<input type="number" id="editbox2" value="0"><!--Высота-->
<div id="wb_rezult">
<span><strong><em>Результат</em></strong></span></div><!--Результат-->
 
<select size="1" id="combobox3"><!--combobox3-->
  <option value="2190, 2648" iswdith="1">А</option><!--по ширине-->
  <option value="2350, 2823" iswdith="1">В</option><!--по ширине-->
  <option value="2490, 2997" iswdith="0">С</option><!--по высоте-->
  <option value="1190, 1450" iswdith="0">Р</option><!--по высоте-->
  <option value="1330, 2252" iswdith="1">Z(by w)</option><!--по ширине-->
</select>
<script>
  var f = 0.5;//parseFloat(intp_f.value);
  var rezult_out = document.getElementById('wb_rezult');//результат
 
  document.getElementById('combobox3').addEventListener("change", myFunc3);
  document.getElementById('editbox1').addEventListener("change", myFunc3); 
  document.getElementById('editbox2').addEventListener("change", myFunc3); 
 

function printValues(mytext) {
    rezult_out.innerHTML = mytext;
};

function myFunc3() {//функция расчета
  var select_idx = document.getElementById('combobox3').selectedIndex;
  var cb3 = document.getElementById('combobox3').options[select_idx].getAttribute('iswdith'); 

  var a = parseFloat(document.getElementById('editbox1').value);
  var b = parseFloat(document.getElementById('editbox2').value);
  var result = f;

  switch (cb3) {
	case "1":
		result*=a;
		break;

	case "0":
		result*=b;
  }
  printValues(result);
    
};
</script>
</body>
</html>

spoon100500 · 24.03.2017, 11:04

Все верно, огромнейшее спасибо!!!

spoon100500 · 24.03.2017, 15:26

Нашел у себя ошибку не могу сообразить как исправить.
Нужно что бы при выборе 3 из combobox33 (value="950"), выбиралось второе значение value из combobox3.
За эту зависимость отвечает эта часть:
if('B' === sel_r.value) {dd = parseFloat(sel_f.value.split(', ')[1]);}
else {dd = parseFloat(sel_f.value.split(', ')[0]); rr = parseFloat(sel_r.value);}
console.log(shirves, dd, rr);
mass = [shirves, dd, rr];
values = mass;
l = values[0];//ширина или высота
f = values[1];//ткани
r = values[2];//системы
rezult = (l * f + r).toFixed(2);

Код HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
	</head>
<body>
<input type="number" id="editbox1" value="0"><!--Ширина-->
<input type="number" id="editbox2" value="0"><!--Высота-->
<div id="wb_rezult">
<span><strong><em>Результат</em></strong></span></div><!--Результат-->

<select size="1" id="combobox3"><!--combobox3-->
<option value="2190, 2648">А</option>
<option value="2350, 2823">В</option>
<option value="2490, 2997">С</option>
<option value="1190, 1450">Р</option>
</select>

<select size="1" id="combobox33"><!--combobox33-->
<option value="0">1</option>
<option value="B">2</option>
<option value="950">3</option>
<option value="600">4</option>
<option value="2100">5</option>
</select>

<script>
function myFunc3()
var a, b, c, f, l;
var intp_a, intp_b, sel_f, sel_r ;
var shirves;
var values;
var mass;
var rr = 0; 
var dd;

sel_f.addEventListener("change", myFunc3);
sel_r.addEventListener("change", myFunc3);

if('B' === sel_r.value) {dd = parseFloat(sel_f.value.split(', ')[1]);} 
else {dd = parseFloat(sel_f.value.split(', ')[0]); rr = parseFloat(sel_r.value);}
          
		  console.log(shirves, dd, rr);
 
          mass = [shirves, dd, rr];
      
		    values = mass;
			
            l = values[0];//ширина или высота
            f = values[1];//ткани
            r = values[2];//системы
		
	rezult = (l * f + r).toFixed(2);
</script>
</body>
</html>

spoon100500 · 24.03.2017, 15:30

Пробывал так, но чёто не работает

Код HTML:

var cb4=950;
if('B' || cb4 === sel_r.value) {dd = parseFloat(sel_f.value.split(', ')[1]);} 
else {dd = parseFloat(sel_f.value.split(', ')[0]); rr = parseFloat(sel_r.value);}

Serge_Bliznykov · 24.03.2017, 16:16

Цитата:

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

Нужно что бы при выборе 3 из combobox33 (value="950"), выбиралось второе значение value из combobox3.
За эту зависимость отвечает эта часть:
if('B' === sel_r.value)

ничегошеньки не понял.

если нужно проверять value="950"
ну так и и пишите

Код:

if (sel_r.value === "950") ...

при чём здесь "B" ?!

и ещё.
а зачем Вы назначение обработчиков addEventListener("change", myFunc3) засунули ВНУТРЬ функции myFunc3?!
это в корне неверно и так работать вообще не будет!!!

23.03.2017, 16:26	#3
spoon100500 Форумчанин Регистрация: 14.10.2016 Сообщений: 406	Ну типа этого, да)) спасибо, буду привязывать к своему коду. Еду медленно, но верно!

24.03.2017, 06:47	#5
spoon100500 Форумчанин Регистрация: 14.10.2016 Сообщений: 406	Подскажите, если установить в option combobox3, что то типа якоря например * и по ней производить поиск т.е. где * расчет по ширине. Как прикрутить этот якорь? Просто если select состоит из сотни option перечислять их все придется в case, не вариант))). Код HTML: switch (cb3) { case "": result=a; break; result*=b; } Еду медленно, но верно!

24.03.2017, 11:04	#7
spoon100500 Форумчанин Регистрация: 14.10.2016 Сообщений: 406	Все верно, огромнейшее спасибо!!! Еду медленно, но верно!

24.03.2017, 15:30	#9
spoon100500 Форумчанин Регистрация: 14.10.2016 Сообщений: 406	Пробывал так, но чёто не работает Код HTML: var cb4=950; if('B' \|\| cb4 === sel_r.value) {dd = parseFloat(sel_f.value.split(', ')[1]);} else {dd = parseFloat(sel_f.value.split(', ')[0]); rr = parseFloat(sel_r.value);} Еду медленно, но верно! Последний раз редактировалось spoon100500; 24.03.2017 в 15:36.

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

23.03.2017, 16:35	#4
Serge_Bliznykov Старожил Регистрация: 09.01.2008 Сообщений: 26,229	Пожалуйста. Успехов в привязке. Будут ещё вопросы - обращайтесь!

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
JSP + HQL: как в блоке <select></select> вызвать метод из DAO?	Blondy	Java для Web (EE, Servlet, JSP, Tomcat, Spring MVC)	4	01.06.2013 15:54
выбор из select до загрузки страницы	Xsires	HTML и CSS	3	17.03.2012 18:37
В зависимости от выбора в Select изменить значения другого Select	Tayfun	HTML и CSS	3	18.08.2011 00:05
Выбор варианта из Select	qwerty55	JavaScript, Ajax	2	17.01.2011 14:53
Select t1.N,t1.FIO,(select t2.acc from t2 where t2.type=1) from t1,t2	mavlon_m	SQL, базы данных	2	17.09.2009 15:28