js <input type="text" list="myDatalist" id="myInput"> <datalist id="myDatalist"> </datalist> $.ajax({ )} 傳值,以及獲取選擇的值
时间: 2024-09-06 16:03:31 浏览: 35
已知一个<input />标签,如何不改变其层级的关系,用js或者加入class设置,在文本框的最右边加一个X,使之可以置空该input
在HTML中,你已经创建了一个文本输入框(`<input type="text"`)和一个数据列表(`<datalist>`)。当你想通过jQuery的Ajax方法获取用户在`datalist`中选择的值,并将它发送到服务器,通常会在用户做出选择后添加一个事件监听器。
首先,你需要在数据列表的`<datalist>`里填充选项,比如:
```html
<script>
var options = ['Option 1', 'Option 2', 'Option 3'];
</script>
<!-- ... -->
<input type="text" id="myInput" list="myDatalist">
<datalist id="myDatalist">
<option value="Option 1">
<option value="Option 2">
<option value="Option 3">
</datalist>
```
然后,在JavaScript中,可以使用`.on()`或`.change()`事件监听器,加上Ajax请求:
```javascript
$(document).ready(function() {
$('#myInput').on('input', function() {
var inputValue = this.value; // 获取输入框的值
// 如果有值并且匹配datalist中的某个选项
if(inputValue && $('#myDatalist option[value="' + inputValue + '"]').length > 0) {
// 使用$.ajax发起请求
$.ajax({
url: 'your-api-url', // 替换为你实际的API地址
data: {selectedValue: inputValue}, // 将用户选择的值作为参数传递
type: 'POST',
success: function(response) {
console.log('成功发送数据:', response);
},
error: function(xhr, status, error) {
console.error('请求失败:', error);
}
});
}
});
});
```
这段代码会在用户输入并离开文本框时检查选择的值是否存在于数据列表中,如果存在则发送请求。
阅读全文