Question

我知道如何使用值设置数据列表中的选定值，

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

但是我不能使用此方法，我想使用ID设置选定的值。

就我而言，我有两个数据列表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

尝试以下代码段：
提琴：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来解决重复ID的问题。然后，它实际上变得非常容易。另外，您根本不需要jQuery。

queue = Queue.new
threads = []

threads << Thread.new { sleep 2; queue.push(nil) }
threads << Thread.new { sleep 50; queue.push(nil) }
threads << Thread.new { sleep 20; queue.push(nil) }

# wait for one
queue.pop

# clean up the rest
threads.each(&:kill).each(&:join)

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');
    }
  }
})

使用ID在数据列表中设置所选值

2 个答案: