Форум

Step48_rus · #1 (**permalink**) 15.08.2019, 09:44

Ребят, хелп!
Есть 2 select'a
<select id="mySelect">
<option value="1" id="tipe1">tipe1</option>
<option value="2" id="tipe2">tipe2</option>
<option value="3" id="tipe3">tipe3</option>
</select>
<select id="mySelect2">
<option value="5" id="mon1">mon1</option>
<option value="6" id="mon2">mon2</option>
<option value="7" id="mon3">mon3</option>
<option value="8" id="mon4">mon4</option>
</select>
<div calss="price"></div>
Нужно что бы при выборе 2 селектов выводило текст в div.price
Например вы приборе:
#tipe1+#mon1 выводило 1000
#tipe1+#mon2 выводило 2000
#tipe2+#mon1 выводило 4000
пробовал через if не получилось
if(($('#mySelect #tipe1').is(":checked")) && ($('#mySelect2 #mon1').is(":checked"))){
alert('1');
};

ksa · #2 (**permalink**) 15.08.2019, 10:17

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

пробовал через if не получилось

Плохо пробовал...

Как вариант...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='https://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function(){
	$('#mySelect, #mySelect2').change(test);
	function test(){
		var o={
			'1_5': 1000,
			'1_6': 2000,
			'2_5': 4000
		};
		var key=$('#mySelect').val();
		key+='_'+$('#mySelect2').val();
		var val=o[key]? o[key]: '';
		$('.price').text(val);
	};
	test();
});
</script>
</head>
<body>
<select id="mySelect">
	<option value="1" id="tipe1">tipe1</option>
	<option value="2" id="tipe2">tipe2</option>
	<option value="3" id="tipe3">tipe3</option>
</select>
<select id="mySelect2">
	<option value="5" id="mon1">mon1</option>
	<option value="6" id="mon2">mon2</option>
	<option value="7" id="mon3">mon3</option>
	<option value="8" id="mon4">mon4</option>
</select>
<div class="price"></div>
</body>
</html>

Step48_rus · #3 (**permalink**) 15.08.2019, 10:33

Подскажи пожалуйста, а если там будет не 2 а 3 selecta и 3-4 разных дива где надо выводить разный текст текст

ksa · #4 (**permalink**) 15.08.2019, 10:41

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

а если там будет не 2 а 3 selecta и 3-4 разных дива где надо выводить разный текст текст

Значит обработка тех селектов будет немного сложнее... И иначе будет выглядеть объест с текстами...

Step48_rus · #5 (**permalink**) 15.08.2019, 10:47

а есть ли возможность это все реализовать не через value а через id?

ksa · #6 (**permalink**) 15.08.2019, 12:16

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

а есть ли возможность это все реализовать не через value а через id?

Можно изващаться как угодно!

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='https://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function(){
	$('#mySelect, #mySelect2').change(test);
	function test(){
		var o={
			'tipe1_mon1': 1000,
			'tipe1_mon2': 2000,
			'tipe2_mon1': 4000
		};
		var key=$('#mySelect > :checked').attr('id');
		key+='_'+$('#mySelect2 > :checked').attr('id');
		var val=o[key]? o[key]: '';
		$('.price').text(val);
	};
	test();
});
</script>
</head>
<body>
<select id="mySelect">
	<option value="1" id="tipe1">tipe1</option>
	<option value="2" id="tipe2">tipe2</option>
	<option value="3" id="tipe3">tipe3</option>
</select>
<select id="mySelect2">
	<option value="5" id="mon1">mon1</option>
	<option value="6" id="mon2">mon2</option>
	<option value="7" id="mon3">mon3</option>
	<option value="8" id="mon4">mon4</option>
</select>
<div class="price"></div>
</body>
</html>

Huskie · #7 (**permalink**) 15.08.2019, 14:18

$('select').change(function(){
var result = 1;
$.each($('select option:selected'), function(index,value){
result *= $(value).val(); // умножение value каждого select
}
$('.price').text(result);
});

ksa · #8 (**permalink**) 15.08.2019, 14:28

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

умножение value каждого select

Зачем это ТСу?

Зачем, в твоем случае, искать

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

option:selected

если можно просто взять value из select?

ksa · #9 (**permalink**) 15.08.2019, 14:33

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

$('select').change(function(){
var result = 1;
$.each($('select option:selected'), function(index,value){
result *= $(value).val(); // умножение value каждого select
}
$('.price').text(result);
});

Более короткий вариант...

$('select').change(function(){
var result = 1;
$('select').each( function(index,value){
result *= value.value; // умножение value каждого select
}
$('.price').text(result);
});

Step48_rus · #10 (**permalink**) 15.08.2019, 15:38

а что если мне нужно умножить 1000 полученную из '1_5': 1000,
на количество получанное из <input class="form-control" type="number" size="3" min="1" value="1" id="qty"> и записать в <div class="sum"></div>
В принципе все что указано выше работает, за что спасибо огромное, но вот с умножением не могу разобраться

Форум

Справочник

Discord чат

Курсы javascript