Question

我有以下代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- add jquery -->

CITY<br>
<input id='cities' type="text" list="list_items">
<datalist id="list_items">
  <option value='Kent'>WA</option> <!-- PLEASE NOTE THAT THERE ARE REPEATING CITY NAMES -->
  <option value='Kent'>DE</option>
  <option value='New York City'>NY</option> <!-- AND REPEATING STATE NAMES -->
  <option value='Liverpool'>NY</option>
  <option value='Brentford'>SD</option>
</datalist>
<br><br>

STATE<br>
<input id='states' type="text" disabled>

<script>
  $('#cities').on('change', function(val) {
    $('#states').val(val.html())
  })
</script>

https://jsfiddle.net/pxcc1vn4/3/

我正在尝试这样做，以便我可以从datalist中选择一个项目，并将所选datalist option的值放在第一个input中将所选.html() datalist的{{1}}放在第二个option中。

Answer 1

请尝试此操作。从第一个列表中选择值，然后在第二个列表中设置该值

    $('#cities').on('change', function(event) {
      $("#states").val(event.target.value);
     })

Check this fiddle

Answer 2

这样就可以了。

$('#cities').on('change', function() {
    $('#states').val($(this).text())
})

http://api.jquery.com/html/ VS http://api.jquery.com/val/

Answer 3

您应该使用val.currentTarget.value

$('#cities').on('change', function(val) {
  debugger;
  		
     var selectedValue = $("#list_items").find("option[value='"+val.currentTarget.value+"']").prop('outerHTML');
$('#states').val(selectedValue);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- add jquery -->

CITY<br>
<input id='cities' type="text" list="list_items">
<datalist id="list_items">
  <option value='Kent WA'>WA</option>
  <option value='Kent DE'>DE</option>
  <option value='New York City'>NY</option>
  <option value='Liverpool'>NY</option>
  <option value='Brentford'>SD</option>
</datalist>
<br><br>
STATE<br>
<input id='states' type="text" >

Answer 4

不要为两个选项使用相同的值

看看这个https://jsfiddle.net/pxcc1vn4/12/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- add jquery -->

CITY<br>
<input id='cities' type="text" list="list_items">
<datalist id="list_items">
  <option value='Kent In WA'>WA</option>
  <option value='Kent In DE'>DE</option>
  <option value='New York City'>NY</option>
  <option value='Liverpool'>NY</option>
  <option value='Brentford'>SD</option>

    STATE

$('#cities').on('change', function(event) {

    $('#states').val($('option[value="'+$(this).val()+'"]').html())
})

Answer 5

试试这个代码段，

HTML CODE：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <!-- add jquery -->

CITY<br>
<input id='cities' type="text" list="list_items">
<datalist id="list_items">
  <option value='Kent'>WA</option>
  <option value='Kent'>DE</option>
  <option value='New York City'>NY</option>
  <option value='Liverpool'>NY</option>
  <option value='Brentford'>SD</option>
</datalist>
<br><br>
STATE<br>
<input id='states' type="text" disabled>

JS CODE：

$(document).on("input", "#cities", function(){
  var val = this.value;

  if($('#list_items').find('option').filter(function(){
        return this.value.toUpperCase() === val.toUpperCase();        
    }).length) {
        //send ajax request
        $("#states").val(this.value);
    }
});

这里正在运作jsfiddle

修改

HTML CODE：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  CITY<br> <input id='cities' type="text" list="list_items"> <datalist id="list_items"> <option value='Kent'>WA</option> <option value='Kent'>DE</option> <option value='New York City'>NY</option> <option value='Liverpool'>NY</option> <option value='Brentford'>SD</option> </datalist> <br><br> STATE<br> <input id='states' type="text" disabled> <input id='secondinput' type="text" disabled>

JS CODE：

$(document).on("input", "#cities", function(){ var val = this.value; if($('#list_items').find('option').filter(function(){ return this.value.toUpperCase() === val.toUpperCase(); }).length) { //send ajax request $("#states").val(this.value); $("#secondinput").val($("#list_items option[value='"+this.value+"']").text()); } });

这有效jsfiddle

JS：获取所选datalist选项的.html（）

5 个答案: