使用 Id 在 Datalist 中设置选定值

Question

我知道如何使用 value 在 Datalist 中设置选定的值，

("#taxCodeID").val("value");

但是我不能用这个方法，我想用ID设置选择的值。

就我而言，我有两个 Datalists TaxCode 和 TaxName。

<div class="form-group">
    <label for="validate-text">Tax Code</label>
    <div class="input-group">
        <input type="text" name="TaxCode" list="taxCode" id="taxCodeID"
                       class="form-control ddlCustomercategoryClass" placeholder="--Select Tax Code--" />
        <datalist id="taxCode">
            <option value="---Select Tax Code---"></option>
            <option value="T01" id="1"></option>
            <option value="T02" id="2"></option>
            <option value="T03" id="3"></option>
            <option value="T04" id="4"></option>
        </datalist>
    </div>
</div>



<div class="form-group">
    <label for="validate-text">Tax Name</label>
    <div class="input-group">
        <input type="text" name="TaxName" list="taxName" id="taxNameID"
                       class="form-control ddlCustomercategoryClass" placeholder="--Select Tax Name--" />
        <datalist id="taxName">
            <option value="---Select Tax Name---"></option>
            <option value="Tax 01" id="1"></option>
            <option value="Tax 02" id="2"></option>
            <option value="Tax 03" id="3"></option>
            <option value="Tax 04" id="4"></option>
        </datalist>
    </div>
</div>

这里的值来自保存表，id字段相同但值字段不同。

我正在尝试在 TaxCode 更改时设置 TaxNAME 的值。我无法使用该值来设置其他我需要使用的 Id。

我该怎么做？

$("#taxCodeID").on('change', function () {

    var taxid = $("#taxCodeID").val(); // getting tax value here

    $("#taxNameID").val(taxid); // setting wrong info

})

上面的小提琴：Fiddle

在 TaxCode 中选择 T01 应在 TaxName 中设置 Tax 01，但其设置为 T01。

Answer 1

试试这个 sn-p：
小提琴：https://jsfiddle.net/zL0oqt4f/

$("#taxCodeID").on('change', function () {
    var taxid = $("#taxCodeID").val();
    var id;

    $('#taxCode > option').each(function(){
        if($(this).attr("value") == taxid ){
           id = $(this).attr("id");
        }
    }); //iterate through the taxCode options searching for the taxid

    var value = $('#taxName > #' + id).attr("value"); //based on the id, select from datalist
    $("#taxNameID").val(value); 
})

Answer 2

首先，我通过在您的第二个数据列表中添加前缀来解决您的重复 ID 问题。然后它实际上变得非常容易。此外，您根本不需要 jQuery。

taxCodeID.addEventListener('input', (e) => {
  if (e.target.value) {
    // get the id of the picked item in the first datalist
    const taxCodePickedId = document.querySelector(`option[value=${e.target.value}]`) ? document.querySelector(`option[value=${e.target.value}]`).id : '';
    // use that id to retrieve the second datalist's matching option
    const taxNameMatch= document.getElementById(`tn${taxCodePickedId}`);
    // make sure there is a matching element in the second list
    if (taxNameMatch) {
      taxNameID.value = taxNameMatch.getAttribute('value');
    }
  }
})

<div class="form-group">
    <label for="validate-text">Tax Code</label>
    <div class="input-group">
        <input type="text" name="TaxCode" list="taxCode" id="taxCodeID"
                       class="form-control ddlCustomercategoryClass" placeholder="--Select Tax Code--" />
        <datalist id="taxCode">
            <option value="---Select Tax Code---"></option>
            <option value="T01" id="1"></option>
            <option value="T02" id="2"></option>
            <option value="T03" id="3"></option>
            <option value="T04" id="4"></option>
        </datalist>
    </div>
</div>



<div class="form-group">
    <label for="validate-text">Tax Name</label>
    <div class="input-group">
        <input type="text" name="TaxName" list="taxName" id="taxNameID"
                       class="form-control ddlCustomercategoryClass" placeholder="--Select Tax Name--" />
        <datalist id="taxName">
            <option value="---Select Tax Name---"></option>
            <option value="Tax 01" id="tn1"></option>
            <option value="Tax 02" id="tn2"></option>
            <option value="Tax 03" id="tn3"></option>
            <option value="Tax 04" id="tn4"></option>
        </datalist>
    </div>
</div>