select/option的应用实例

通过控制select获取option的value值来控制另一个select是否可被选择

例:描述:想通过下方选中不同的选项控制上方可不可以被选中(不可选中置灰)

解决方案

	 $("#statetype").change(function(){
		    var opt=$("#statetype").val();
		    if(opt == 1){
		    	$("#sel_round_6").attr("disabled", "disabled");
         		$("#sel_round_6").attr("style", "background-color: #EEEEEE;");
		    }else if(opt == 2){
		    	$("#sel_round_6").removeAttr("disabled");
         		$("#sel_round_6").attr("style", "background-color: #FFFFFF;");
		    }else if(opt == 3){
		    	$("#sel_round_6").attr("disabled", "disabled");
         		$("#sel_round_6").attr("style", "background-color: #EEEEEE;");
		    }
		});

1.使用JQuery通过ID获取选中选项的value值
2.进行判断来做相关操作(我这边是控制不可被选择且置灰,可被选中置为白色)

select 添加值改变事件

在这里插入图片描述
可以传入 ID 或者value 来进行判断选中的选项 选择国内或国际触发此事件后可对其做下一步操作

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以帮你完成这个任务。首先,你需要在 Vue 实例中定义几个数据属性,分别表示第一个输入框的值、第二个输入框的值、运算符和计算结果: ```javascript new Vue({ el: '#app', data: { no1: '', no2: '', operator: '+', result: '' }, methods: { calc: function() { // 计算逻辑 } } }) ``` 然后,在 HTML 中使用 `v-model` 指令将这些数据属性与输入框绑定起来: ```html <input type="text" class="no1" v-model="no1"> <select id="ysf" v-model="operator"> <option>+</option> <option>-</option> <option>*</option> <option>/</option> <option>%</option> </select> <input type="text" class="no2" v-model="no2"> = <input type="text" class="jg" v-model="result"> <input type="button" value="计算" @click="calc"> ``` 最后,在 `calc` 方法中编写计算逻辑,并将结果赋值给 `result` 数据属性: ```javascript calc: function() { var num1 = parseFloat(this.no1); var num2 = parseFloat(this.no2); if (isNaN(num1) || isNaN(num2)) { this.result = ''; return; } switch (this.operator) { case '+': this.result = num1 + num2; break; case '-': this.result = num1 - num2; break; case '*': this.result = num1 * num2; break; case '/': if (num2 === 0) { this.result = '除数不能为0'; } else { this.result = num1 / num2; } break; case '%': this.result = num1 % num2; break; } } ``` 这样就完成了双向绑定和计算功能。完整的代码如下: ```html <div id="app"> <input type="text" class="no1" v-model="no1"> <select id="ysf" v-model="operator"> <option>+</option> <option>-</option> <option>*</option> <option>/</option> <option>%</option> </select> <input type="text" class="no2" v-model="no2"> = <input type="text" class="jg" v-model="result"> <input type="button" value="计算" @click="calc"> </div> <script> new Vue({ el: '#app', data: { no1: '', no2: '', operator: '+', result: '' }, methods: { calc: function() { var num1 = parseFloat(this.no1); var num2 = parseFloat(this.no2); if (isNaN(num1) || isNaN(num2)) { this.result = ''; return; } switch (this.operator) { case '+': this.result = num1 + num2; break; case '-': this.result = num1 - num2; break; case '*': this.result = num1 * num2; break; case '/': if (num2 === 0) { this.result = '除数不能为0'; } else { this.result = num1 / num2; } break; case '%': this.result = num1 % num2; break; } } } }) </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值