Question

我正在构建一个用于选择与药物相关的药物和细节的网络应用程序。有一些部分允许选项，但其他部分＆＃39;选项需要输入文本而不是选择其他选项之一。我想在其他人之后添加一个文本框。选项已被选中。

以下是我一直在处理的完整代码。我尝试过使用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

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

1 个答案: