Question

我需要创建一个隐藏文本框，当用户选择“其他”时可以访问该文本框。这是我的代码。请指教

         <script>
   $('#sel').change(function() {
   $('#other').css('display', ($(this).val() == 'Other') ? 'block' :   'none');
    });
   });</script>
         <div class="form-group">
              <label class="control-label col-sm-2">Frequency:</label>
              <div class="col-xs-3">

              <select id="Regime" name="regime" class="form-control" required="">
                      <option value="" selected="" disabled="">Please select A regime...</option>
                      <option value="Once A Day">Once A Day</option>
                      <option value="BD">BD</option>
                      <option value="TDS">TDS</option>
                      <option value="QDS">QDS</option>
                      <option value="Other">Other (please specify)</option>
              </select>
              <input type="text" id="other" style="display: none;" />
              </div>
         </div>

Answer 1

你让它显示：无;在css中，然后使用jQuery在用户选择其他时显示它。

<style type="text/css">
#textbox{
display: none;
}
</style>
<script type="text/javascript>
$('#Regime').change(funtion(){
if($('#Regime').val() == 'Other'){
$('#textbox').show();
}
});
</script>

但是不要忘记链接jQuery。这是在您的头部标签之间......

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Answer 2

创建文本字段并使用

$('#otherTextbox').hide();

$('#Regime').on('change', function(){
    if( $(this).val() == 'other' ){ $('#otherTextbox').show();
    }
    else {
        $('#otherTextbox').hide();
    }
});

Answer 3

你可以通过JavaScript完成。这是代码（您可以自定义它）：

<div class="form-group">
      <label class="control-label col-sm-2">Frequency:</label>
      <div class="col-xs-3">
      <select id="Regime" name="regime" class="form-control" required="" onchange="changeSelect(this.selectedIndex);">
              <option value="" selected="" disabled="">Please select A regime...</option>
              <option value="Once A Day">Once A Day</option>
              <option value="BD">BD</option>
              <option value="TDS">TDS</option>
              <option value="QDS">QDS</option>
              <option value="Other">Other (please specify)</option>
      </select>
      </div>
 </div>
<div class="form-group">
  <div class="col-xs-3" id="secondSelect">
  </div>
</div>

<script type="text/javascript">

var subOptions = new Array();
for(i=1;i<=4;i++){
  subOptions[i] = new Array();
}
//===Options for Once A Day:
subOptions[1][0]='Once A Day 1';
subOptions[1][1]='Once A Day 2';
subOptions[1][2]='Once A Day 3';


//===Options for BD:
subOptions[2][0]='BD 1';
subOptions[2][1]='BD 2';
subOptions[2][2]='BD 3';


//===Options for TDS:
subOptions[3][0]='TDS 1';
subOptions[3][1]='TDS 2';
subOptions[3][2]='TDS 3';


//===Options for QDS:
subOptions[4][0]='QDS 1';
subOptions[4][1]='QDS 2';
subOptions[4][2]='QDS 3';


function changeSelect(which){
  alert(which);
  switch(which.toString()){
    case '5':
      result='<input name="regimeOption" class="form-control" />';
      break;

    case '0':
      result = 'Please select A regime...';
      break;

    default:
      result='<select name="regimeOption" class="form-control" />';
      for(i=0;i<subOptions[which].length;i++){
        result+='<option value="'+subOptions[which][i]+'">'+subOptions[which][i]+'</option>';
      }
      result+='</select>';
      break;
  }
  document.getElementById('secondSelect').innerHTML = result;

}



</script>

使用选择选项创建一个文本框

3 个答案: