在选择选择上显示/隐藏范围ID

时间:2016-11-07 13:30:53

标签: javascript jquery html

当我从选择选项值中选择ms时,我想显示复选框,复选框在范围的标识boxcheck中指定。如果是其他,则显示带有范围radiocheck

的单选按钮

这是我正在尝试的不起作用:

$('#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>

4 个答案:

答案 0 :(得分:2)

Working Demo

正如上面评论中所述,它意味着将变量名称从更改为 selectedValue

尝试以下解决方案:

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

  if (selectedValue === 'ms') {
    $('#radiocheck').show();
    $('#boxcheck').hide();
  } else {
    $('#radiocheck').hide();
    $('#boxcheck').show();
  }
});
&#13;
<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> 
&#13;
&#13;
&#13;

答案 1 :(得分:2)

它现在正在工作

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

  if (value === 'ms') {
    $('#radiocheck').show();
    $('#boxcheck').hide();
  } else {
    $('#radiocheck').hide();
    $('#boxcheck').show();
  }
});
&#13;
<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>
&#13;
&#13;
&#13;

答案 2 :(得分:1)

尝试以下代码:

  $('#Typeselect').change(function() {

  //you had a typo here...
  var selectedValue = this.value;

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

答案 3 :(得分:1)

使用if条件

时需要使用value

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

  if (value  === 'ms') {
    $('#radiocheck').show();
    $('#boxcheck').hide();
  } else {
    $('#radiocheck').hide();
    $('#boxcheck').show();
  }
});
&#13;
<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>
&#13;
&#13;
&#13;