[英]JS: Get the .html() of selected datalist option
我有以下代码:
<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
,并将所选datalist
option
的.html()
放在第二个input
。
改为尝试此操作。从第一个列表中选择值,然后在第二个列表中进行设置
$('#cities').on('change', function(event) {
$("#states").val(event.target.value);
})
这将达到目的。
$('#cities').on('change', function() {
$('#states').val($(this).text())
})
您应该使用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" >
请勿对两个选项使用相同的值
看看这个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>
州
$('#cities').on('change', function(event) {
$('#states').val($('option[value="'+$(this).val()+'"]').html())
})
试试这个片段
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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.