上面那段代码中的<select type="text" class="form-control" id="method" name="method">,显示警告此处不允许使用特性 type
时间: 2023-07-02 22:21:40 浏览: 38
这段代码中的`<select>`标签并不需要使用`type`属性,应该将其删除,因为`<select>`标签本身就是用于选择列表的,不需要额外的类型声明。因此,建议修改为如下代码:
```
<select class="form-control" id="method" name="method">
```
这样就不会再出现警告信息了。
相关问题
<p style="font-size: x-large">总价:¥{{ total }}<span id="totalPrice">0</span></p> <div style="width: 50%"> <div class="form-group"> <label for="name">收货人姓名</label> <input type="text" class="form-control" id=name" name="name" value="{{ user.customer.name }}"> </div> <div class="form-group"> <label for="name">电话</label> <input type="tel" class="form-control" id="name" name="phone" value="{{ user.customer.phone }}"> </div> <div class="form-group"> <label for="name">地址</label> <input type="text" class="form-control" id="name" name="address" value="{{ user.customer.address }}"> </div> <div class="form-group"> <label for="name">支付方式</label> <select type="text" class="form-control" id="name" name="method"> <option value="支付宝">支付宝</option> <option value="微信">微信</option> <option value="银行卡">银行卡</option> </select> </div> <div class="form-group"> <button type="submit" class="btn btn-primary">提交</button> </div> </div>
代码中有两个地方的 `id` 属性值都是 "name",这会导致重复的 id 引用。为了解决这个问题,可以将这两个 `id` 属性值修改为不同的值,例如:
```
<p style="font-size: x-large">总价:¥{{ total }}<span id="totalPrice">0</span></p>
<div style="width: 50%">
<div class="form-group">
<label for="name">收货人姓名</label>
<input type="text" class="form-control" id="name" name="name" value="{{ user.customer.name }}">
</div>
<div class="form-group">
<label for="phone">电话</label>
<input type="tel" class="form-control" id="phone" name="phone" value="{{ user.customer.phone }}">
</div>
<div class="form-group">
<label for="address">地址</label>
<input type="text" class="form-control" id="address" name="address" value="{{ user.customer.address }}">
</div>
<div class="form-group">
<label for="method">支付方式</label>
<select type="text" class="form-control" id="method" name="method">
<option value="支付宝">支付宝</option>
<option value="微信">微信</option>
<option value="银行卡">银行卡</option>
</select>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">提交</button>
</div>
</div>
```
这样就可以避免重复的 id 引用了。
<div class="col-sm-4"> <input type="text" class="form-control pull-left" name="username" autocomplete="off" id="search-input" required placeholder="请输入联络员"/> <ul class="autocomplete-results list-group"></ul> 随便输入的时候,下面有提示,点击可直接添加到输入框中,且可以添加几个。springboot+mybatisplus+bootstrap完整案例 代码实现
这段代码实现了一个包含输入框和自动完成功能的搜索框。下面是可能的实现代码,使用了Bootstrap作为前端框架,Spring Boot和MyBatis Plus作为后端框架。具体实现可能还需要其他的代码来支持自动完成的功能,以及将选择的结果添加到输入框中。
HTML代码:
```html
<div class="col-sm-4">
<input type="text" class="form-control pull-left" name="username" autocomplete="off" id="search-input" required placeholder="请输入联络员"/>
<ul class="autocomplete-results list-group"></ul>
</div>
```
JavaScript代码:
```javascript
$(document).ready(function() {
// 绑定输入框的输入事件
$('#search-input').on('input', function() {
var query = $(this).val();
// 发送Ajax请求获取自动完成的结果
$.ajax({
url: '/autocomplete',
method: 'GET',
data: {
query: query
},
success: function(results) {
// 清空自动完成的结果
$('.autocomplete-results').empty();
// 将结果添加到下拉列表中
results.forEach(function(result) {
var li = $('<li class="list-group-item"></li>');
li.text(result);
$('.autocomplete-results').append(li);
});
}
});
});
// 绑定下拉列表的点击事件
$('.autocomplete-results').on('click', 'li', function() {
var selected = $(this).text();
// 将选择的结果添加到输入框中
$('#search-input').val(selected);
});
});
```
Java代码:
```java
@RestController
public class AutocompleteController {
@Autowired
private ContactService contactService;
@GetMapping("/autocomplete")
public List<String> autocomplete(@RequestParam String query) {
// 调用ContactService获取自动完成的结果
return contactService.autocomplete(query);
}
}
@Service
public class ContactService {
@Autowired
private ContactMapper contactMapper;
public List<String> autocomplete(String query) {
// 调用MyBatis Plus进行模糊查询
QueryWrapper<Contact> wrapper = new QueryWrapper<>();
wrapper.like("name", query);
List<Contact> contacts = contactMapper.selectList(wrapper);
// 将查询结果转换为字符串列表
List<String> results = new ArrayList<>();
contacts.forEach(contact -> results.add(contact.getName()));
return results;
}
}
```
这段代码实现了一个简单的自动完成功能,可以根据输入框中的内容查询数据库中的联系人,并将查询结果显示在下拉列表中。用户可以选择下拉列表中的结果,将选择的结果添加到输入框中。
相关推荐
![.zip](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![.zip](https://img-home.csdnimg.cn/images/20210720083646.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)