当前位置: 首页 > 工具软件 > jSelect > 使用案例 >

select的用法总结

端木乐语
2023-12-01

最近一直遇到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");
			}
		}
	}
 类似资料: