如何从Bootstrap下拉菜单中显示所选项目？ [英] How to display selected item from Bootstrap dropdown?

问题描述

我知道这个问题已经问了很多，但是我仍然无法在我的代码中找到答案。

I know this question has been asked and answered a lot, but I still can't figure it out within my code.

更新后的代码

  {% 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部分都无法正常工作，因为隐藏和显示部分也无法正常工作。有什么想法吗？

This is the code for my dropdown, and when selecting a value from the dropdown list, it is not displayed in the dropdown button. I feel like my whole JavaScript part is not working, since the "hide & show" part doesn't work either. Any ideas?

推荐答案

您可能需要这样的东西

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

价值

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

这篇关于如何从Bootstrap下拉菜单中显示所选项目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！