jquery 获取select参数
时间: 2023-10-19 11:05:39 浏览: 70
你可以使用 jQuery 的 `val()` 方法来获取 `select` 元素的值。例如:
```html
<select id="mySelect">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
```
```javascript
var selectedValue = $('#mySelect').val();
console.log(selectedValue); // 输出选中的值,例如 "option2"
```
如果你需要获取选中的 `option` 元素的文本内容,可以使用 `text()` 方法。例如:
```javascript
var selectedText = $('#mySelect option:selected').text();
console.log(selectedText); // 输出选中的文本内容,例如 "Option 2"
```
相关问题
jquery 删除select选中的值
JQuery删除select选中的值的方法很简单,可以通过val()函数来实现。val()函数用于获取表单元素的值,如果给这个函数传入一个参数,则表示要设置这个表单元素的值。在删除select选中的值时,我们可以通过将select元素的value值设置为空或者设置为默认值来实现。
如下代码可以实现将select选中的值删除:
```javascript
$('#select-id').val('');
```
其中,#select-id是你想要删除选中值的select元素的id。当val()函数传入空字符串时,会将选中的值清空。如果设置为默认值,可以将参数设置为该默认值。例如:
```javascript
$('#select-id').val('default-value');
```
这样就可以将选中的值删除,并且将select元素设置为默认值。在实际操作中,我们可以根据具体业务需求来灵活使用这个方法。
springboot Jquery select2 后端获取数据 完整示例
好的,下面是一个完整的示例:
首先,前端需要引入 jQuery 和 Select2 的依赖:
```
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>
```
在 HTML 中定义一个 Select2 的下拉框:
```
<select id="mySelect" class="form-control"></select>
```
然后,通过 jQuery 调用 Select2 插件:
```
$(document).ready(function() {
$('#mySelect').select2({
ajax: {
url: '/getData', // 后端获取数据的接口地址
dataType: 'json',
delay: 250,
data: function(params) {
return {
q: params.term, // 搜索关键字
page: params.page // 分页参数
};
},
processResults: function(data, params) {
params.page = params.page || 1;
return {
results: data.items, // 后端返回的数据
pagination: {
more: (params.page * 10) < data.total_count // 是否还有更多数据
}
};
},
cache: true
},
placeholder: '请选择', // 未选择时的提示文本
minimumInputLength: 1 // 最少输入字符数
});
});
```
后端接口代码示例(使用 Spring Boot):
```
@RestController
public class MyController {
@GetMapping("/getData")
public Map<String, Object> getData(@RequestParam("q") String query,
@RequestParam("page") int page) {
// 根据搜索关键字和分页参数获取数据
List<Object> items = new ArrayList<>();
int total_count = 100; // 总记录数
Map<String, Object> result = new HashMap<>();
result.put("items", items);
result.put("total_count", total_count);
return result;
}
}
```
以上就是一个完整的 Spring Boot + jQuery + Select2 后端获取数据的示例。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)