select的用法总结

5 篇文章 0 订阅

最近一直遇到select,就总结了一下,也有参考网上的。

	<select name="" id="fruits">
		<option value="mangguo">芒果</option>
		<option value="pingguo">苹果</option>
		<option value="xiangjiao">香蕉</option>
		<option value="chengzi">橙子</option>
	</select>
	
	<input type="button" value="提交" onclick="change()"/>
	<input type="button" value="删除" onclick="removeOne()"/>
	<input type="button" value="修改" onclick="modifyOne()"/>


	function change(){
		document.getElementById("fruits")[2].selected=true;					
	}
	
	var obj = document.getElementById("fruits"); //定位id
	var index = obj.selectedIndex; // 选中索引
	var text = obj.options[index].text; // 选中文
	var value = obj.options[index].value; // 选中值
	
	// 选中某一项
	function selectFruits(){
		var num = document.getElementById('myinput').value;   //获取input中输入的数字
		var numbers = obj.options; //获取select下拉框的所有值
		for (var j = 0; j < numbers.length; j++) {
			if (numbers[j].value == num) {
				obj[j].selected=true;
			}
		} 
	}
	
	// 删除某一行
	function removeOne(){
		var  obj=document.getElementById('fruits');
		//index,要删除选项的序号,这里取当前选中选项的序号
		var index=obj.selectedIndex;
		obj.options.remove(index);
		// 删除所有的option
		// obj.options.length=0;
	}
	
	// 改变
	function modifyOne(){
		var obj=document.getElementById('fruits');
		var index=obj.selectedIndex;  //序号,取当前选中选项的序号
		// var val=obj.options[index]= new Option( "新文本" , "新值" );
		// 改变某一项的文本和值
		var val=obj.options[index]= new Option( "梨子" , "lizi" );
		// 增加一项
		obj.add(new Option( "柚子" , "yuozi" ));
	}
	
	// jquery
	//获取到下拉框被选中的optionde value值:pingguo;
	$("#fruits option:selected").val();   
	$("#fruits").find("option:selected").val();
	
	//获取到下拉框被选中的optionde 文本内容:苹果;
    $("#fruits option:selected").text();  
	$("#fruits").find("option:selected").text();
	
	//获取Select选择的索引值
	$("#fruits").get(0).selectedIndex;  
	
	//获取Select最大的索引值
	$("#fruits option:last").attr("index");  
	
	// 获取第二个值
	$('#fruits option:eq(1)').val();
	
	//删除Select中Value='pingguo'的Option
	$("#fruits option[value='pingguo']").remove(); 
	//删除第一项
	$('#fruits option:first').remove();
			
	function selectNumber(){
		var oneVal = $("#myinput").val();   //获取input中输入的数字
		var fruitsList = $("#fruits").find("option"); //获取select下拉框的所有值
		for (var j = 1; j < fruitsList.length; j++) {
			if ($(fruitsList[j]).val() == oneVal) {
				$(fruitsList[j]).attr("selected", "selected");
			}
		}
	}
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值