使用Javascript从点击事件中的“.row”中获取选择字段的值答案

【问题标题】：Get the value of a select field from a ".row" in the click event using Javascript使用Javascript从点击事件中的“.row”中获取选择字段的值
【发布时间】：2020-03-11 10:32:52
【问题描述】：

我有一个用户文档记录，我在其中动态添加或删除行并控制它们的索引。

每一行都在名为“div-documentos”的 div 内。我创建了两个事件：“click”事件（用于存储每行的 select“sel-document-tipo”的值）和“change”事件，用于在用户在 select 中选择一个选项后执行操作。问题是点击事件无法从相应的行中获取字段select的值，即从与当前行不同的另一行中取值。

var documentoTipoIdPrevious = "0";
$("#div-documentos").bind("click", ".sel-documento-tipo", function (e) {
    //get current row select value
    //is not working
    documentoTipoIdPrevious = $(this).closest('.row').find('.sel-documento-tipo').val();
    alert(documentoTipoIdPrevious)

}).on("change", ".sel-documento-tipo", function (e) {
//it's working  
});

怎么了？为什么要从另一个不同的行中获取选择值？

HTML：

    <div class="col-md-12" id="div-documentos" data-select2-id="div-documentos">

    <div class="form-group align-items-center row" data-select2-id="34">
        <div class="card card-shadow col-md-12 pl-0 pr-o pt-0 pb-0 border border-default" data-select2-id="33">
            <div class="card-block">
                        <h4 class="card-title"><i class="icon fa-address-book-o" aria-hidden="true"></i>TÍTULO DE ELEITOR</h4>
            </div>
            <div class="card-block" data-select2-id="32">
                <div class="form-group align-items-center">
                    <input class="hid-id" data-val="true" data-val-required="The Id field is required." id="PessoaViewModel_PessoasDocumentosViewModel_0__Id" name="PessoaViewModel.PessoasDocumentosViewModel[0].Id" type="hidden" value="13">
                    <input class="hid-pessoaId" data-val="true" data-val-required="Escolha uma Pessoa" id="PessoaViewModel_PessoasDocumentosViewModel_0__PessoaId" name="PessoaViewModel.PessoasDocumentosViewModel[0].PessoaId" type="hidden" value="4">
                    <input class="hid-documento-tipo-descricao" id="PessoaViewModel_PessoasDocumentosViewModel_0__DocumentoTipoDescricao" name="PessoaViewModel.PessoasDocumentosViewModel[0].DocumentoTipoDescricao" type="hidden" value="TÍTULO DE ELEITOR">

                    <div class="col-md-6" data-select2-id="31">
                        <label class="control-label lb-documento-tipo" for="PessoaViewModel_PessoasDocumentosViewModel_0__DocumentoTipoId">Tipo de Documento</label>
                        <select data-id="7" title="Selecione uma opção" class="form-control sel-documento-tipo select2-hidden-accessible" data-val="true" data-val-required="Escolha um Tipo de Documento" id="PessoaViewModel_PessoasDocumentosViewModel_0__DocumentoTipoId" name="PessoaViewModel.PessoasDocumentosViewModel[0].DocumentoTipoId" data-select2-id="PessoaViewModel_PessoasDocumentosViewModel_0__DocumentoTipoId" tabindex="-1" aria-hidden="true"><option value="" data-select2-id="45"></option><option value="1" data-select2-id="46">CPF - CADASTRO NACIONAL DE PESSOA FÍSICA</option>
                            <option value="3" data-select2-id="47">RG - REGISTRO GERAL</option>
                            <option value="4" data-select2-id="48">RNE - REGISTRO NACIONAL DE ESTRANGEIROS</option>
                            <option selected="selected" value="7" data-select2-id="14">TÍTULO DE ELEITOR</option>
                            <option value="8" data-select2-id="49">CTPS - CARTEIRA DE TRABALHO E PREVIDÊNCIA SOCIAL</option>
                            <option value="9" data-select2-id="50">CNH - CARTEIRA NACIONAL DE HABILITAÇÃO</option>
                            <option value="10" data-select2-id="51">CAM - CERTIFICADO DE ALISTAMENTO MILITAR</option>
                            <option value="11" data-select2-id="52">PASSAPORTE</option>
                            <option value="12" data-select2-id="53">NIS - NÚMERO DE IDENTIFICAÇÃO SOCIAL</option>
                            </select><span class="select2 select2-container select2-container--default select2-container--below" dir="ltr" data-select2-id="13" style="width: auto;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" title="Selecione uma opção" tabindex="0" aria-labelledby="select2-PessoaViewModel_PessoasDocumentosViewModel_0__DocumentoTipoId-container"><span class="select2-selection__rendered" id="select2-PessoaViewModel_PessoasDocumentosViewModel_0__DocumentoTipoId-container" role="textbox" aria-readonly="true" title="CPF - CADASTRO NACIONAL DE PESSOA FÍSICA"><span class="select2-selection__clear" data-select2-id="54">×</span>CPF - CADASTRO NACIONAL DE PESSOA FÍSICA</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
                        <span class="text-danger val-documento-tipo field-validation-valid" data-valmsg-for="PessoaViewModel.PessoasDocumentosViewModel[0].DocumentoTipoId" data-valmsg-replace="true"></span>
                    </div>
                    <div class="col-md-6">
                        <label class="control-label lb-documento" for="PessoaViewModel_PessoasDocumentosViewModel_0__Documento">Núm. Documento</label>
                        <input type="text" class="form-control txt-documento" data-val="true" data-val-maxlength="O campo Documento deve ter no máximo 30 caracteres" data-val-maxlength-max="30" data-val-required="O campo Número do Documento é obrigatório" id="PessoaViewModel_PessoasDocumentosViewModel_0__Documento" name="PessoaViewModel.PessoasDocumentosViewModel[0].Documento" value="12345">
                        <span class="text-danger val-documento field-validation-valid" data-valmsg-for="PessoaViewModel.PessoasDocumentosViewModel[0].Documento" data-valmsg-replace="true"></span>
                    </div>
                </div>
            </div>
            <div class="card-block">
                <div class="card-actions float-right">
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-icon btn-default btn-outline btn-remover-documento" title="Excluir Documento"><i class="icon wb-trash" aria-hidden="true"></i></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="form-group align-items-center row" data-select2-id="59">
        <div class="card card-shadow col-md-12 pl-0 pr-o pt-0 pb-0 border border-default" data-select2-id="58">
            <div class="card-block">
                        <h4 class="card-title"><i class="icon wb-payment" aria-hidden="true"></i>CPF - CADASTRO NACIONAL DE PESSOA FÍSICA</h4>
            </div>
            <div class="card-block" data-select2-id="57">
                <div class="form-group align-items-center">
                    <input class="hid-id" data-val="true" data-val-required="The Id field is required." id="PessoaViewModel_PessoasDocumentosViewModel_1__Id" name="PessoaViewModel.PessoasDocumentosViewModel[1].Id" type="hidden" value="14">
                    <input class="hid-pessoaId" data-val="true" data-val-required="Escolha uma Pessoa" id="PessoaViewModel_PessoasDocumentosViewModel_1__PessoaId" name="PessoaViewModel.PessoasDocumentosViewModel[1].PessoaId" type="hidden" value="4">
                    <input class="hid-documento-tipo-descricao" id="PessoaViewModel_PessoasDocumentosViewModel_1__DocumentoTipoDescricao" name="PessoaViewModel.PessoasDocumentosViewModel[1].DocumentoTipoDescricao" type="hidden" value="CPF - CADASTRO NACIONAL DE PESSOA FÍSICA">

                    <div class="col-md-6" data-select2-id="56">
                        <label class="control-label lb-documento-tipo" for="PessoaViewModel_PessoasDocumentosViewModel_1__DocumentoTipoId">Tipo de Documento</label>
                        <select data-id="1" title="Selecione uma opção" class="form-control sel-documento-tipo select2-hidden-accessible" data-val="true" data-val-required="Escolha um Tipo de Documento" id="PessoaViewModel_PessoasDocumentosViewModel_1__DocumentoTipoId" name="PessoaViewModel.PessoasDocumentosViewModel[1].DocumentoTipoId" data-select2-id="PessoaViewModel_PessoasDocumentosViewModel_1__DocumentoTipoId" tabindex="-1" aria-hidden="true"><option value="" data-select2-id="60"></option><option selected="selected" value="1" data-select2-id="17">CPF - CADASTRO NACIONAL DE PESSOA FÍSICA</option>
                        <option value="3" data-select2-id="61">RG - REGISTRO GERAL</option>
                        <option value="4" data-select2-id="62">RNE - REGISTRO NACIONAL DE ESTRANGEIROS</option>
                        <option value="7" data-select2-id="63">TÍTULO DE ELEITOR</option>
                        <option value="8" data-select2-id="64">CTPS - CARTEIRA DE TRABALHO E PREVIDÊNCIA SOCIAL</option>
                        <option value="9" data-select2-id="65">CNH - CARTEIRA NACIONAL DE HABILITAÇÃO</option>
                        <option value="10" data-select2-id="66">CAM - CERTIFICADO DE ALISTAMENTO MILITAR</option>
                        <option value="11" data-select2-id="67">PASSAPORTE</option>
                        <option value="12" data-select2-id="68">NIS - NÚMERO DE IDENTIFICAÇÃO SOCIAL</option>
                        </select><span class="select2 select2-container select2-container--default select2-container--above" dir="ltr" data-select2-id="16" style="width: auto;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" title="Selecione uma opção" tabindex="0" aria-labelledby="select2-PessoaViewModel_PessoasDocumentosViewModel_1__DocumentoTipoId-container"><span class="select2-selection__rendered" id="select2-PessoaViewModel_PessoasDocumentosViewModel_1__DocumentoTipoId-container" role="textbox" aria-readonly="true" title="CPF - CADASTRO NACIONAL DE PESSOA FÍSICA"><span class="select2-selection__clear" data-select2-id="18">×</span>CPF - CADASTRO NACIONAL DE PESSOA FÍSICA</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
                        <span class="text-danger val-documento-tipo field-validation-valid" data-valmsg-for="PessoaViewModel.PessoasDocumentosViewModel[1].DocumentoTipoId" data-valmsg-replace="true"></span>
                    </div>
                    <div class="col-md-6">
                        <label class="control-label lb-documento" for="PessoaViewModel_PessoasDocumentosViewModel_1__Documento">Núm. Documento</label>
                        <input type="text" class="form-control txt-documento" data-val="true" data-val-maxlength="O campo Documento deve ter no máximo 30 caracteres" data-val-maxlength-max="30" data-val-required="O campo Número do Documento é obrigatório" id="PessoaViewModel_PessoasDocumentosViewModel_1__Documento" name="PessoaViewModel.PessoasDocumentosViewModel[1].Documento" value="091.479.907-08" maxlength="14">
                        <span class="text-danger val-documento field-validation-valid" data-valmsg-for="PessoaViewModel.PessoasDocumentosViewModel[1].Documento" data-valmsg-replace="true"></span>
                    </div>


                </div>
            </div>
            <div class="card-block">
                <div class="card-actions float-right">
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-icon btn-default btn-outline btn-remover-documento" title="Excluir Documento"><i class="icon wb-trash" aria-hidden="true"></i></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

为什么是 .bind 和 .on？ .bind 被 .on 取代并被弃用
这与 ASP 无关。如果您改为单击编辑，然后单击[<>] sn-p 编辑器并仅发布 JS 和 HTML，那么我们可以测试您的 minimal reproducible example
你为什么不用$(this).val() 而不是$(this).closest('.row').find('.sel-documento-tipo').val()

标签： javascript jquery asp.net-mvc events jquery-events

【解决方案1】：

好的，这是您的查询出了什么问题

$("#div-documentos").bind("click", ".sel-documento-tipo", function (e) {
    //get current row select value
    //is not working
    documentoTipoIdPrevious = $(e.target).val();
    alert(documentoTipoIdPrevious)

}).on("change", ".sel-documento-tipo", function (e) {
//it's working  
});

【讨论】：

我用生成的 html 更新了帖子。如果仅使用“$ (this) .val ();”，则无法取值和选择。可以使用“$(this).closest('.Row').find('.sel-documento-tipo').val()”获取值，但不是当前行的值……它看起来正在失去价值......
委托给select时不需要使用e.target。也不推荐使用绑定。看我的回答
你好@mplungjan。 mousedown 事件不起作用...当我从 bind 更改为 on 事件不起作用。
有人可以远程访问我的电脑并进行检查吗？所以我们可以把答案留在这里。我已经尝试了一切...... :(
您是否尝试过使用我在更新中提到的 e.target ？

【解决方案2】：

使用纯 HTML 更容易检查您的代码

我相信我找到了您的问题。

您希望鼠标按下并更改选择本身。
无需导航到 .row 即可找到您正在与之交互的选择
我在两个事件中都改为 .on

var documentoTipoIdPrevious = "0";
$("#div-documentos").on("mousedown", ".sel-documento-tipo", function(e) {
  documentoTipoIdPrevious = $(this).val();
  console.log("Before", documentoTipoIdPrevious)
}).on("change", ".sel-documento-tipo", function(e) {
  console.log("After", $(this).val())
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-12" id="div-documentos" data-select2-id="div-documentos">

  <div class="form-group align-items-center row" data-select2-id="34">
    <div class="card card-shadow col-md-12 pl-0 pr-o pt-0 pb-0 border border-default" data-select2-id="33">
      <div class="card-block">
        <h4 class="card-title"><i class="icon fa-address-book-o" aria-hidden="true"></i>TÍTULO DE ELEITOR</h4>
      </div>
      <div class="card-block" data-select2-id="32">
        <div class="form-group align-items-center">
          <input class="hid-id" data-val="true" data-val-required="The Id field is required." id="PessoaViewModel_PessoasDocumentosViewModel_0__Id" name="PessoaViewModel.PessoasDocumentosViewModel[0].Id" type="hidden" value="13">
          <input class="hid-pessoaId" data-val="true" data-val-required="Escolha uma Pessoa" id="PessoaViewModel_PessoasDocumentosViewModel_0__PessoaId" name="PessoaViewModel.PessoasDocumentosViewModel[0].PessoaId" type="hidden" value="4">
          <input class="hid-documento-tipo-descricao" id="PessoaViewModel_PessoasDocumentosViewModel_0__DocumentoTipoDescricao" name="PessoaViewModel.PessoasDocumentosViewModel[0].DocumentoTipoDescricao" type="hidden" value="TÍTULO DE ELEITOR">

          <div class="col-md-6" data-select2-id="31">
            <label class="control-label lb-documento-tipo" for="PessoaViewModel_PessoasDocumentosViewModel_0__DocumentoTipoId">Tipo de Documento</label>
            <select data-id="7" title="Selecione uma opção" class="form-control sel-documento-tipo select2-hidden-accessible" data-val="true" data-val-required="Escolha um Tipo de Documento" id="PessoaViewModel_PessoasDocumentosViewModel_0__DocumentoTipoId" name="PessoaViewModel.PessoasDocumentosViewModel[0].DocumentoTipoId"
              data-select2-id="PessoaViewModel_PessoasDocumentosViewModel_0__DocumentoTipoId" tabindex="-1" aria-hidden="true">
              <option value="" data-select2-id="45"></option>
              <option value="1" data-select2-id="46">CPF - CADASTRO NACIONAL DE PESSOA FÍSICA</option>
              <option value="3" data-select2-id="47">RG - REGISTRO GERAL</option>
              <option value="4" data-select2-id="48">RNE - REGISTRO NACIONAL DE ESTRANGEIROS</option>
              <option selected="selected" value="7" data-select2-id="14">TÍTULO DE ELEITOR</option>
              <option value="8" data-select2-id="49">CTPS - CARTEIRA DE TRABALHO E PREVIDÊNCIA SOCIAL</option>
              <option value="9" data-select2-id="50">CNH - CARTEIRA NACIONAL DE HABILITAÇÃO</option>
              <option value="10" data-select2-id="51">CAM - CERTIFICADO DE ALISTAMENTO MILITAR</option>
              <option value="11" data-select2-id="52">PASSAPORTE</option>
              <option value="12" data-select2-id="53">NIS - NÚMERO DE IDENTIFICAÇÃO SOCIAL</option>
            </select><span class="select2 select2-container select2-container--default select2-container--below" dir="ltr" data-select2-id="13" style="width: auto;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" title="Selecione uma opção" tabindex="0" aria-labelledby="select2-PessoaViewModel_PessoasDocumentosViewModel_0__DocumentoTipoId-container"><span class="select2-selection__rendered" id="select2-PessoaViewModel_PessoasDocumentosViewModel_0__DocumentoTipoId-container" role="textbox" aria-readonly="true" title="CPF - CADASTRO NACIONAL DE PESSOA FÍSICA"><span class="select2-selection__clear" data-select2-id="54">×</span>CPF
            - CADASTRO NACIONAL DE PESSOA FÍSICA</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span>
            </span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
            <span class="text-danger val-documento-tipo field-validation-valid" data-valmsg-for="PessoaViewModel.PessoasDocumentosViewModel[0].DocumentoTipoId" data-valmsg-replace="true"></span>
          </div>
          <div class="col-md-6">
            <label class="control-label lb-documento" for="PessoaViewModel_PessoasDocumentosViewModel_0__Documento">Núm. Documento</label>
            <input type="text" class="form-control txt-documento" data-val="true" data-val-maxlength="O campo Documento deve ter no máximo 30 caracteres" data-val-maxlength-max="30" data-val-required="O campo Número do Documento é obrigatório" id="PessoaViewModel_PessoasDocumentosViewModel_0__Documento"
              name="PessoaViewModel.PessoasDocumentosViewModel[0].Documento" value="12345">
            <span class="text-danger val-documento field-validation-valid" data-valmsg-for="PessoaViewModel.PessoasDocumentosViewModel[0].Documento" data-valmsg-replace="true"></span>
          </div>
        </div>
      </div>

【讨论】：

你好@mplungjan！只有更改事件有效。我不知道还能做什么:(
@MasterJR 我用你的 HTML 更新了。我的代码按您的要求工作