有个select下拉框的数据如下如下:list:[{id:1,name:123},{id:2,name:234},{id:3,name:345}],现在要求当我选择123的时候,其他的选项禁用,当我选择除了123的其他选项的时候123禁用,请用js或者vue来实现
时间: 2024-04-13 15:31:24 浏览: 49
Jquery结合jQueryUI实现的select下拉框美化以及功能性禁用的效果源码.zip
你可以使用JavaScript或Vue.js来实现这个需求。下面我将分别给出两种实现方式。
使用JavaScript实现:
```html
<select id="mySelect">
<option value="">请选择</option>
<option value="1">123</option>
<option value="2">234</option>
<option value="3">345</option>
</select>
<script>
var selectElement = document.getElementById("mySelect");
selectElement.addEventListener("change", function() {
var selectedValue = selectElement.value;
var options = selectElement.getElementsByTagName("option");
for (var i = 0; i < options.length; i++) {
if (options[i].value !== selectedValue) {
options[i].disabled = (selectedValue !== "" && options[i].value === "1");
}
}
});
</script>
```
使用Vue.js实现:
```html
<template>
<select v-model="selectedOption">
<option value="">请选择</option>
<option v-for="option in options" :value="option.id" :disabled="isDisabled(option.id)">{{ option.name }}</option>
</select>
</template>
<script>
export default {
data() {
return {
selectedOption: "",
options: [
{ id: 1, name: "123" },
{ id: 2, name: "234" },
{ id: 3, name: "345" }
]
};
},
methods: {
isDisabled(id) {
return (this.selectedOption !== "" && id === 1) || (this.selectedOption === "" && id === 2);
}
}
};
</script>
```
这两种方式都可以实现当选择"123"时禁用其他选项,选择其他选项时禁用"123"。你可以根据自己的需求选择其中一种方式来实现。
阅读全文