Question

我正在尝试获取#place输入中的值并将其保留在该输入中，但传真号是否输入#fax？是否可以获取这两个值并将它们放入相应的位置。

input type="text" id="place" list="places">
<datalist id="places">
    <option value="WVC">503-882-1212</option>
    <option value="HAM">612-883-1414</option>
    <option value="WON">317-445-8585</option>
</datalist>
<br>
<input type="text" id="fax">

Answer 1

根据您提供给我们的起始代码，您需要做两件事才能达到此效果。首先，您需要通过添加事件侦听器来捕获对input元素的任何更改。

其次，使用javascript，您只需从所有存在的选项中选择正确的选项元素，然后提取传真号码，即标签innerHTML。

<input type="text" id="place" list="places">
<datalist id="places">
    <option value="WVC">503-882-1212</option>
    <option value="HAM">612-883-1414</option>
    <option value="WON">317-445-8585</option>
</datalist>
<br>
<input type="text" id="fax">
<script>
    document.querySelector('input').addEventListener('input', function () {
        var val = document.querySelector('input').value;
        faxNum = document.querySelectorAll('option[value="' + val + '"]')[0].innerHTML;
        document.querySelector('#fax').value = faxNum;
    });
</script>

Answer 2

尝试使用jquery attr值

     $(document).on('change', '#place', function () {
         $("#fax").val($("#places option[value='" + $("#place").val() + "']").attr("label"));
      });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="place" list="places">
    <datalist id="places">
        <option value="WVC" label="503-882-1212"></option>
        <option value="HAM" label="612-883-1414"></option>
        <option value="WON" label="317-445-8585"></option>
    </datalist>
    <br>
    <input type="text" id="fax">

从jquery中的datalist获取值和文本

2 个答案: