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示例

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