最近一直遇到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");
}
}
}