JS：獲取的.html（）選擇數據列表選項

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的項目，將所選datalistoption的值設置在第一個input中，並將所選的datalistoption中的.html()置於第二個input中。

Answer 1

試試這個instead.Select值形成的第一個列表，並設置在第二

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

Check this fiddle

Answer 2

您應該使用val.currentTarget.value

$('#cities').on('change', function(val) { 
 
    debugger; 
 
    \t \t 
 
    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 3

ŧ他的意志會訣竅。

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

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

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 0123，不要使用相同的值

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

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

Answer 5

試試這個片斷，

HTML代碼：

<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代碼：

$(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代碼：

<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> 
<input id='secondinput' type="text" disabled> 

JS代碼：

$(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