[英]Text box in select option for web app
我正在构建一个用于选择药物和与药物相关的详细信息的网络应用。 有一些部分允许使用选项,但是“其他”选项需要输入文本,而不是选择其他选项之一。 我试图在选择“其他”选项后添加一个文本框。
这是我一直在努力的全部代码。 我曾尝试使用javascript和一些jquery,但无法使其正常工作。 请提供任何帮助。
<div class="form-group">
<label class="control-label col-sm-2">Route:</label>
<div class="col-xs-3">
<select id="Quantity" name="quantity" class="form-control" required="">
<option value="" selected="" disabled="">Please select A dosage...</option>
<option value="PO">PO</option>
<option value="IV">IV</option>
<option value="PR">PR</option>
<option value="Topically">Topically</option>
<option value="other">Other (please specify)</option>
</select>
</div>
</div>
<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>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Date of Prescription:</label>
<div class="col-xs-3">
<input class="form-control" type="date" name="prescription" placeholder="(yyyy-mm-dd)" required>
</div>
</div>
请看这个jsfiddle示例
$('textarea').hide();
$('#Quantity').change(function()
{
var o = $(this).find('option:selected').val();
console.log(o);
if(o=='other') $('textarea').show();
});
所以这是一些解释:
$('textarea').hide(); // hide the textarea by default
$('#Quantity').change(function(){ }); // when the user select an option in the #quantity select tag
var o = $(this).find('option:selected').val(); // get the current value of the option selected
if(o=='other') $('textarea').show(); // if the variable o is equal to "other" then show the textarea
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.