时间戳

首页 > 解决方案 > 如何使用jQuery根据点击表列表更改选择下拉值？

javascript - 如何使用jQuery根据点击表列表更改选择下拉值？

问题描述

我有一个列表，其中包含一些属性数据，如letid, industrysize, industrytypeid。而且我也有多个选择下拉菜单。

我想要的是，当我单击列表中的某个项目时，下拉列表将根据列表中的值发生变化。我已经制作了如下的javascript。但还是不行。谁能帮我？

$(document).ready(function(){
  $('.table-autocomplete td').click(function () {
    $("#select-ac").click();
  });
  $(document).on('click', '.table-autocomplete-value', function () {
    let letidValue = $(this).data('letid');
    let industrySize = $(this).data('industrysize');
    let indsutrytypeid = $(this).data('industrytypeid');

    if(letidValue === null || letidValue === ''){
      console.log(letidValue)
      console.log(industrySize)
      console.log(indsutrytypeid)
      
      $("select[name='account-industrySize']").val($(this).data('industrysize')).change();
      $("select[name='account-industrySize']").prop("disabled", false);
      $("select[name='account-industryType-id']").val($(this).data('industrytypeid')).change();
      $("select[name='account-industryType-id']").prop("disabled", false);
      $("select[name='account-legalEntityType-id']").val($(this).data('letid')).change();
      $("select[name='account-legalEntityType-id']").prop("disabled", false);
    }else{
      console.log(letidValue)
      console.log(industrySize)
      console.log(indsutrytypeid)

      $("select[name='account-industrySize']").val($(this).data('industrysize')).change();
      $("select[name='account-industrySize']").prop("disabled", true);
      $("select[name='account-industryType-id']").val($(this).data('industrytypeid')).change();
      $("select[name='account-industryType-id']").prop("disabled", true);
      $("select[name='account-legalEntityType-id']").val($(this).data('letid')).change();
      $("select[name='account-legalEntityType-id']").prop("disabled", true);
    }
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="select-ac"></div>
<table class="table-autocomplete" id="racbe5de91fbfd94c89be790f1408638751">
  <tbody>
    <tr>
      <td class="table-autocomplete-value" tabindex="22" data-key="22" data-industrysize="[10,100)" data-industrytypeid="13" data-letid="2">ABADI JAYA PACKING</td>
    </tr>
    <tr>
      <td class="table-autocomplete-value" tabindex="324" data-key="324" data-industrysize="[101,300)" data-industrytypeid="11" data-letid="6">ABADI JAYA PACKING</td>
    </tr>
    <tr>
      <td class="table-autocomplete-value" tabindex="23" data-key="23" data-industrysize="" data-industrytypeid="" data-letid="">ACER STORE</td>
    </tr>
    <tr>
      <td class="table-autocomplete-value" tabindex="327" data-key="327" data-industrysize="[10,100)" data-industrytypeid="13" data-letid="2">ACER STORE</td>
    </tr>
    <tr>
      <td class="table-autocomplete-value" tabindex="24" data-key="24" data-industrysize="[2,10)" data-industrytypeid="13" data-letid="5">ADIJAYA BUANA PERKASA</td>
    </tr>
  </tbody>
</table>

<select name="account-legalEntityType-id" id="legal-entity-type" onchange="this.style.color='black';" style="color: black;">
  <option value="" style="display:none">Jenis Perusahaan</option>
  <option value="11" style="color: black;">Lainnya</option>
  <option value="1" style="color: black;">PT</option>
  <option value="2" style="color: black;">CV</option>
  <option value="3" style="color: black;">Firma</option>
  <option value="4" style="color: black;">PD</option>
  <option value="5" style="color: black;">UD</option>
  <option value="6" style="color: black;">BUMN</option>
  <option value="7" style="color: black;">BUMD</option>
  <option value="8" style="color: black;">Lembaga</option>
  <option value="9" style="color: black;">Yayasan</option>
  <option value="10" style="color: black;">Koperasi</option>
</select>

<select name="account-industryType-id" id="company-classified" onchange="this.style.color='black';" style="color: black;">
  <option value="" style="display:none">Klasifikasi Perusahaan</option>
  <option value="11" style="color: black;">Pertambangan</option>
  <option value="12" style="color: black;">Trading</option>
  <option value="13" style="color: black;">Properti</option>
  <option value="14" style="color: black;">Pertanian</option>
  <option value="15" style="color: black;">Pertenakan</option>
  <option value="16" style="color: black;">Transportasi & Gudang</option>
  <option value="17" style="color: black;">Lainnya</option>
  <option value="1" style="color: black;">Jasa</option>
  <option value="2" style="color: black;">Kesehatan</option>
  <option value="3" style="color: black;">Kesenian & Hiburan</option>
  <option value="4" style="color: black;">Keuangan & Asuransi</option>
  <option value="5" style="color: black;">Konstruksi</option>
  <option value="6" style="color: black;">Manufaktur & Perakitan</option>
  <option value="7" style="color: black;">Pemerintahan, Badan & BUMN</option>
  <option value="8" style="color: black;">Pendidikan</option>
  <option value="9" style="color: black;">Pengelolaan Limbah</option>
  <option value="10" style="color: black;">Hotel, Restoran, Cafe</option>
</select>

<select name="account-industrySize" id="company-classified" onchange="this.style.color='black';" style="color: black;">
  <option value="" style="display:none">Jumlah Karyawan</option>
  <option value="[2,10)" style="color: black;">2-9</option>
  <option value="[10,100)" style="color: black;">10-99</option>
  <option value="[101,300)" style="color: black;">100-299</option>
  <option value="[300,)" style="color: black;">&gt;300</option>
</select>

标签： javascripthtmljquery

解决方案

检索“data*”属性时引用了错误的 jQuery 选择器

您的点击功能应如下所示：

$(document).on('click', '.table-autocomplete-value', function () {
    let letidValue = $(this).data('letid');
    let industrySize = $(this).data('industrysize');
    let indsutrytypeid = $(this).data('industrytypeid');

    if(letidValue === null || letidValue === ''){
      console.log(letidValue)
      console.log(industrySize)
      console.log(indsutrytypeid)
      
      $("select[name='account-industrySize']").val($(this).data('industrysize')).change();
      $("select[name='account-industrySize']").prop("disabled", false);
      $("select[name='account-industryType-id']").val($(this).data('industrytypeid')).change();
      $("select[name='account-industryType-id']").prop("disabled", false);
      $("select[name='account-legalEntityType-id']").val($(this).data('letid')).change();
      $("select[name='account-legalEntityType-id']").prop("disabled", false);
    }else{
      console.log(letidValue)
      console.log(industrySize)
      console.log(indsutrytypeid)

      $("select[name='account-industrySize']").val($(this).data('industrysize')).change();
      $("select[name='account-industrySize']").prop("disabled", true);
      $("select[name='account-industryType-id']").val($(this).data('industrytypeid')).change();
      $("select[name='account-industryType-id']").prop("disabled", true);
      $("select[name='account-legalEntityType-id']").val($(this).data('letid')).change();
      $("select[name='account-legalEntityType-id']").prop("disabled", true);
    }
  })

注意我删除了$('#select-ac').data，我把$(this).data

推荐阅读