I have a dropdown, once I select value, it will be display another dropdown with numbers in value according to a class (one , two , three ).
I want to show value only from actually selected dropdown it .one, .two or .threee
Thanks
jQuery("select.choose").change(function () {
jQuery('select.box').hide();
jQuery('select.box.'+$(this).val()).show();
});
jQuery(".box").bind('click keyup', function(e) {
var priestor2 = parseFloat(jQuery("select[name='priestor_2_3']").val() || 0);
var priestor3 = parseFloat(jQuery("select[name='priestor_2_6']").val() || 0);
var priestor4 = parseFloat(jQuery("select[name='priestor_3_7']").val() || 0);
var priestor = priestor2 + priestor3 + priestor4;
jQuery("#result").text(priestor);
console.log(priestor);
});.box {
display: none;
}<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div>
<select class="choose">
<option>Choose</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
<select name="priestor_2_3" class="one box">
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="priestor_2_6" class="two box">
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="priestor_3_7" class="three box">
<option value="3">3</option>
<option value="4">4</option>
</select>
<div id="result">result</div>
</div>Simply use this key workd , to access current changed box select value :
as you used it in top first drop down ,
as fillow var currentBoxValue = parseFloat($(this).val() || 0);
See beleow snippet :
$("select.choose").change(function () {
selectedBox = $(this).val();
$('select.box').hide();
$('select.box.'+selectedBox).show();
$("#result").text("");
$('select.box').val("");
});
$(".box").bind('click keyup', function(e) {
var currentBoxValue = parseFloat($(this).val() || 0);
$("#result").text(currentBoxValue);
});.box {
display: none;
}
#result{
color:red;
font-weight:bold;
}<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div>
<select class="choose">
<option>Choose</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
<select name="priestor_2_3" class="one box">
<option value="">Select value</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="priestor_2_6" class="two box">
<option value="">Select value</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="priestor_3_7" class="three box">
<option value="">Select value</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br>
<div >result : <span id="result"></span></div>
</div>