Question

我有一个html下拉字段，其中应在底部添加一个文本字段，命名为other。此字段中输入的文字应为<select name="drop"> <option selected="selected">Please select ...</option> <option value="car">car</option> <option value="bike">bike</option> <option value="Other">Other</option> </select>

下拉html是：

  <form>
    <label class="control-label col-md-4" style="text-align: left;" for="Date">Date:<span style="color:red;">*</span></label>
    <div class="col-md-8">
      <div class='input-group date' id='assignWODate'>
        <input type='text' class="form-control" ng-model="woAssignedDate" bs-datepicker ng-required="woAssignedDateIsRequired"   />
        <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
        </span>
      </div>
    </div>
    <input type="submit" value="submit">
  </form>

这里其他应该是文本字段。为了理解我保留其他作为选项，但我希望它是一个输入文本字段，其中值由用户给出。

提前致谢

Answer 1

默认情况下，您可以为其他文本添加隐藏的输入字段：

<input type='text' id='other' name='other' style="display:none"/>

然后捕获js中select的更改，然后检查所选的选项值是否等于Other并显示该字段或隐藏它：

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

希望这有帮助。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="drop">
  <option selected="selected">Please select ...</option>
  <option value="car">car</option>
  <option value="bike">bike</option>
  <option value="Other">Other</option>
</select>
<input type='text' id='other' name='other' style="display:none" value='other:'/>

Answer 2

<script type="text/javascript">
function showfield(name){
  if(name=='Other')document.getElementById('div1').innerHTML='Other: <input type="text" name="other" />';
  else document.getElementById('div1').innerHTML='';
}
</script>

<select name="drop" id="drop" onchange="showfield(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="car">car</option>
<option value="bike">bike</option>
<option value="Other">Other</option>
</select>
<div id="div1"></div>

Answer 3

你可以采用另一种方式，通过文本字段访问所有选项 - 但在用户输入时提供自动完成选项。这可以通过jQuery自动完成插件等或新的html5 datalist来完成。这将一组预定的选项绑定到文本字段 - 允许用户在输入值与值匹配时从中进行选择，但如果没有匹配则允许输入替代文本。请注意，Safari（以及可能的其他浏览器）尚不支持此功能。但是当它得到支持时它非常酷。

viewholder.radioButton.setChecked(boolean.get(position))

在html下拉列表中添加一个文本字段

3 个答案: