设置页面上所有输入框、下拉框都disabled

<script language="javascript" type="">
function readonly(){
//document.getElementById("readonly").innerHTML='注:不能修改,只能查询';
var selectlist=document.getElemen tsByTagName("select");
for(var i=0;i<selectlist.length;i++){
     selectlist[i].disabled=true;
}
var inputlist=document.getElemen tsByTagName("input");
for(var i=0;i<inputlist.length;i++){
     inputlist[i].disabled=true;
}
}
</script>

<div style="display: inline;"><font size="6"><b>修改供应商</b></font></div>原标题
<div style='color: red;display: inline' id='readonly'></div>
### Vue.js 中实现输入框下拉框组合组件 在 Vue.js 应用中,可以轻松创建一个由输入框和下拉菜单组成的复合组件。这种类型的组件通常用于允许用户既可以通过手动输入也可以通过选择预定义选项来设置值。 #### 创建基础模板结构 首先构建 HTML 结构: ```html <div id="app"> <div class="combo-box"> <input v-model="selectedValue" @blur="handleBlur" /> <select v-model="selectedValue" style="display:none;"> <option disabled value="">请选择</option> <option v-for="item in options" :key="item.value" :value="item.value">{{ item.text }}</option> </select> </div> 已选中的值:{{ selectedValue }} </div> ``` 此部分代码设置了基本的 UI 布局,并利用 `v-model` 将输入框和隐藏的选择器绑定到同一个变量上[^1]。 #### 初始化 Vue 实例并定义数据模型 接着初始化 Vue 实例以及必要的属性: ```javascript new Vue({ el: '#app', data () { return { selectedValue: '', options: [ { text: '选项一', value: 'one' }, { text: '选项二', value: 'two' }, { text: '选项三', value: 'three' } ] }; }, methods: { handleBlur(event) { const inputValue = event.target.value; // 如果输入的内容在可选项内,则清空输入框 let isExisted = false; for (let i = 0; i < this.options.length; i++) { if (this.options[i].text === inputValue || this.options[i].value === inputValue) { isExisted = true; break; } } if (!isExisted && inputValue !== '') { alert('请输入有效值'); this.selectedValue = ''; } } } }); ``` 这段 JavaScript 定义了一个简单的验证逻辑,在失去焦点时检查输入是否存在于给定的选项列表中;如果是有效的选项则提示错误信息并将输入重置为空字符串。 为了使用户体验更友好,还可以进一步增强功能,比如当用户点击输入框时显示可用选项供其挑选,或是支持模糊匹配等功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值