使用Javascript

2024-05-20 • 问答

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

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

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",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>

gsyyyy 回答：使用Javascript

使用纯HTML可以更轻松地检查您的代码

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

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

var documentoTipoIdPrevious = "0";
$("#div-documentos").on("mousedown",".sel-documento-tipo",function(e) {
  documentoTipoIdPrevious = $(this).val();
  console.log("Before",documentoTipoIdPrevious)
}).on("change",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>

好，这是您的查询有误

my

asp.net-mvc events javascript jquery jquery-events

本文链接：https://www.f2er.com/3096522.html

使用Javascript

gsyyyy 回答：使用Javascript

大家都在问