javascript - 获取引导模式中动态添加的选择输入的值以显示/隐藏文本输入

Question

我有一个 Bootstrap 模式，我在其上使用 jQuery 添加了一个 Select 下拉列表，然后我需要获取该下拉列表的值并显示或隐藏另一个文本输入。

模态的一部分#testDetailModal：

<div class="modal-body" id="modalBody">
    <p id="modalName"></p>
    <p id="modalTime"></p>
    <div class="col-md-12">
    </div>
    <p id="modalResponse"></p>
    <div class="col-md-12">
    <button type="button" class="btn btn-danger mt-2" id="statusButton">Change</button>
    </div>
</div>

jQuery添加选择：

$('<div class="soldClass col-md-12"><div class="form-group">
<label for="test-result" class="control-label">Update result:</label>
<select class="form-control" name="test-result" id=resultSelect">
  <option value="">Choose</option>
  <option value="pass">Passed</option>
  <option value="fail">Failed</option>
</select></div></div>

<div id="datePick" class="dateClass col-md-12"><div class="form-group">
<label for="test-date" class="control-label">Next test:</label>
  <input type="date" class="form-control" name="test-date"></div></div>
<div class="resultClass col-md-12">
<button type="button" class="btn btn-danger mt-2" id="resultButton">Update</button>
</div>').insertAfter( "#modalTime" );

如果选择了“失败”选项，我想显示#datePickdiv 我隐藏它是这样的：

$('#testDetailModal').on('shown.bs.modal', function () {
  var nextDate = $('#datePick');
  nextDate.hide();
 });

我无法获得 Select 的值来显示它，这是我尝试过的：

$('#testDetailModal').on('change','#resultSelect', function () {
   var resultOption = $('#resultSelect option:selected').val();
   if(resultOption == 'fail') {
    nextDate.show(); 
    //console.log(this.value);
    } else {
    nextDate.hide();
    } 
});

希望有人能指出我正确的方向，我认为这与使用有关，on()但不太确定如何去做。

标签： javascriptjquerybootstrap-modal