javascript - Web 应用程序选择选项中的文本框

Question

我正在构建一个网络应用程序，用于选择药物以及与药物相关的详细信息。有些部分允许选项，但“其他”选项需要输入文本，而不是选择其他选项之一。我试图在选择“其他”选项后添加一个文本框。

这是我一直在编写的完整代码。我尝试过使用 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>

Answer 1

请看这个jsfiddle example

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