使用 val() 和 trigger('change') 更改输入值答案

【问题标题】：change value on an input with val() and trigger('change')使用 val() 和 trigger('change') 更改输入值
【发布时间】：2020-12-09 22:20:13
【问题描述】：

我有一个按钮列表，每个按钮都有一个特定的值，我想在单击按钮时获取其中一个值，然后将此值放入特定的输入中。我正在使用 symfony 和 jquery 来做到这一点。这是我的代码：

具有特定值的不同按钮：

{% block body %}
<div class="row">
    <div class="col-sm-12">
        <div class="card-box ">
            <h2 class="m-t-0 header-title">{{ "Données traitement"|trans }}</h2>
            <div class="btn-group btn-group-lg" role="group" aria-label="...">
                {% for s in secteur %}
                    <button id="linkSecteur_{{ s.SecteurId }}" class="text-lg-left btn btn-link z-btn-secteur essai" data-id="{{ s.SecteurId }}">{{ s.LibLong }}</button>
                {% endfor  %}
            </div>

我想将按钮选择的值放入的输入：

        <form id="searchForm" class="form-horizontal search-form " role="form" action="{{ path('api_post', {id: odata_search}) }}" method="post">
            <div class="row">
                <div class="col-6 col-md-8">{{ form_row(form.Secteur) }}</div>

这是我尝试修复的测试：

var $searchFieldSecteur = $("#form_Secteur");

            $('#linkSecteur_02').on('click',function() {

               var long = $(this).val('hello');
                //console.log(long);
                $searchFieldSecteur.val(long).trigger('change')
    });

【问题讨论】：

标签： jquery symfony triggers

【解决方案1】：

如果按值表示按钮的 data-id attr 则使用 .val() 对您没有帮助，您必须使用 attr()

var $searchFieldSecteur = $("#form_Secteur");

// use a class instead of id to make the rule apply on multiple buttons
$('.z-btn-secteur').on('click', function() {

  // get value from data-id attribute
  var long = $(this).attr('data-id');
  console.log(long);
  $searchFieldSecteur.val(long).trigger('change')
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body style="background:white">
  <button id="linkSecteur_01" class="text-lg-left btn btn-link z-btn-secteur essai" data-id="01">button 1</button>
  <button id="linkSecteur_02" class="text-lg-left btn btn-link z-btn-secteur essai" data-id="02">button 2</button>
  <button id="linkSecteur_03" class="text-lg-left btn btn-link z-btn-secteur essai" data-id="03">button 3</button>

  <form id="searchForm" style="margin-top:25px" class="form-horizontal search-form " role="form" method="post">
    <input id="form_Secteur" type="text">
  </form>

</body>

【讨论】：

您好 Zurupupz，非常感谢您快速而完整的回答，它非常有效。