Question

我知道这个问题已被提出并得到了很多回答，但我仍然无法在我的代码中弄明白。

更新了代码

  {% trans_default_domain 'Documents' %} 

      <div class="row">
          <div class="col-md-6">
              <div class="form-group">
        <label for="documentDropdown">{{ form_label(form.type) }}</label>
  <select class="form-control" id="documentDropdown">
  <option value="" selected disabled>Select Document Type</option>
  <option value="1" href="#">{{ 'document_types.contract'|trans }}</option>
  <option value="2" href="#">{{ 'document_types.general'|trans }}</option>
  <option value="3" href="#">{{ 'document_types.goodwill_policy'|trans }}</option>
  <option value="4" href="#">{{ 'document_types.pricesheet'|trans }}</option>
  <option value="5" href="#">{{ 'document_types.yq_update'|trans }}</option>
  <option value="6" href="#">{{ 'document_types.contract_addendum'|trans }}</option>
</select>
</div>

          <div class="col-md-6" id="vka">
              {{ form_row(form.vka_number) }}
          </div>
      </div>

      <div class="row">
          <div class="col-md-6">
              {{ form_row(form.active) }}
          </div>
          <div class="col-md-6 hidden">
              {{ form_row(form.signature) }}
          </div>
      </div>


      {% block javascripts %}
      <script>
        $(function(){
          $('.dropdown-menu').on( 'click', 'a', function() {
            var text = $(this).html();
            var htmlText = text + ' <span class="caret"></span>';
            $(this).closest('.dropdown').find('.dropdown-toggle').html(htmlText);
          });

        });

        $(document).ready(function(){
          $('#documentDropdown').on('change', function(){
            if (this.value == '1')
            {
              $('#vka').show();
            }
            else {
              $('#vka').hide();
            }
          });
        });
      </script>
        {% endblock %}

这是我的下拉列表的代码，当从下拉列表中选择一个值时，它不会显示在下拉按钮中。我觉得我的整个JavaScript部分都不起作用，因为“hide＆amp; show”部分也不起作用。有什么想法吗？

Answer 1

你可能需要这样的东西

$('#documentDropdown').find(":selected").text();

表示值

$('#documentDropdown').find(":selected").val();

如何在Bootstrap下拉列表中显示所选项目？

1 个答案: