我有一个 Python/Django 项目，我正在尝试添加“select2”以方便用户从银行列表中进行搜索：
class BuyerNaturalPersonBankAccountForm(forms.ModelForm):
select_bank = MajorBankList(
label='Banco',
required=False,
)
class Meta:
model = BuyerBankAccount
fields = (
'name',
'cpf',
'cnpj',
'select_bank',
'bank',
'bank_code',
'agency',
'account',
'account_type',
)
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields['bank'].required = False
self.fields['bank_code'].required = False
self.fields['bank'].widget.attrs.update(
{
'v-model': 'bank',
':disabled': 'isBankDisabled',
}
)
self.fields['bank_code'].widget.attrs.update(
{
'v-model': 'bank_code',
':disabled': 'isBankDisabled',
}
)
self.fields['select_bank'].widget = forms.Select(
choices=self.fields['select_bank'].choices,
attrs={
'v-model': 'selectedBank',
'@change': 'onBankChange',
'data-select2-enabled': True,
}
)
在我的base.html中，我添加了select2：
<script>
$(document).ready(function() {
$('[data-select2-enabled]').select2({
closeOnSelect: true,
theme: "bootstrap"
});
});
</script>
在 HTML 代码中，我实现了一项检查，以在用户选择“select_bank:”时禁用“bank”和“bank_code”字段：
var app = new Vue({
el: '#app',
delimiters: ['[[', ']]'],
data: {
street: '',
district: '',
city: '',
state: '',
country: '',
cpf: '',
name: '',
mother_name: '',
father_name: '',
nationality: '',
selectedBank: '',
bank: '',
bank_code: '',
bankAccountOwnerName: '',
bankAccountCPF: '',
birth_date: '',
public_person: false,
isLoading: false,
isPostalCodeFound: true,
isCPFFound: true,
display_form_address: false,
display_form_bank: false,
hasError: '{{ error }}',
},
beforeMount: function () {
this.bank = this.$el.querySelector('#id_form-0-bank').value
this.bank_code= this.$el.querySelector('#id_form-0-bank_code').value
this.postal_code = this.$el.querySelector('#id_form-0-postal_code').value
<script>
$(document).ready(function() {
$('[data-select2-enabled]').select2({
closeOnSelect: true,
theme: "bootstrap"
});
});
我执行此检查以禁用该字段：
computed: {
isBankDisabled: function() {
return this.selectedBank !== '';
}
},
当我检查是否 return this.selectedBank === '' 时，无论我是否在 select_bank 字段中填写某些内容，该值都会变为 true。即使我将该字段留空或填写，bank 和bank_code 的值也始终被禁用。实际上，根据我修改的逻辑，只有当值为空时才应该禁用它们。
如果我删除 select2，逻辑将再次开始正常工作：
self.fields['select_bank'].widget.attrs.update(
{
'v-model': 'selectedBank',
'@change': 'onBankChange',
'data-select2-enabled': False,
请尝试这个：
$(document).ready(function() {
const submit = $('#submit');
submit.click(function(){
var $select = $('.js-example-basic-single').select2();
var selectedValue = $select.val();
console.log(selectedValue);
if (selectedValue === null || selectedValue.length === 0) {
console.log('Input is blank');
} else {
console.log('Input is not blank');
}
});
});<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js" defer></script>
<title>Select 2</title>
</head>
<body>
<select class="js-example-basic-single" name="state">
<option value="">---</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
</select>
<button id="submit">Submit</button>
</body>
</html>