Dip Dip - 22 days ago 5
HTML Question

Show/hide span id on select selection

I want to show checkbox when i select

ms
from the select option value, checkbox is specified in span's id
boxcheck
. If other then show radio button with span id
radiocheck


This is what I am trying which is not working:



$('#Typeselect').change(function() {
var value = this.value;

if (selectedValue === 'ms') {
$('#radiocheck').show();
$('#boxcheck').hide();
} else {
$('#radiocheck').hide();
$('#boxcheck').show();
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4 operations">
<span style="display:none" id="boxcheck">
<input type="checkbox" name="correct['+val+questions+'][]"> Correct
</span>
<span id="radiocheck" style="display:none">
<input type="radio" name="correct['+val+questions+'][]"> Correct
</span>
</div>
<select class="form-control" id="Typeselect" name="question_type[]" Required>
<option value="txt">Text</option>
<option value="ms">Color text</option>
<option value="mm">Rainbow</option>
</select>




Answer

Working Demo

As mentioned in comment above, it meant to change Variable name from value to selectedValue.

Try the below solution:

$('#Typeselect').change(function() {
  var selectedValue = this.value;

  if (selectedValue === 'ms') {
    $('#radiocheck').show();
    $('#boxcheck').hide();
  } else {
    $('#radiocheck').hide();
    $('#boxcheck').show();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4 operations">
  <span style="display:none" id="boxcheck">
    <input type="checkbox" name="correct['+val+questions+'][]"> Correct
  </span>
  <span id="radiocheck" style="display:none">
    <input type="radio" name="correct['+val+questions+'][]"> Correct
  </span>
</div>
<select class="form-control" id="Typeselect" name="question_type[]" Required>
  <option value="txt">Text</option>
  <option value="ms">Color text</option>
  <option value="mm">Rainbow</option>
</select>