Show value from selected dropdown-CodePudding

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>

CodePudding user response：

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>