您的位置是:网站首页>Javascript编程Javascript编程

javascript如何设置select

少儿编程网2021-05-28 14:06:37Javascript编程 人已围观 来源:少儿编程 -用户投稿

简介javascript设置select的方法:1、设置value为pxx的项选中,代码为【$(.selector).val(pxx)】;2、设置text为pxx的项选中,代码为【$(.selector).find..】。本教程操作

javascript设置select的方法:1、设置value为pxx的项选中,代码为【$(".selector").val("pxx")】;2、设置text为pxx的项选中,代码为【$(".selector").find..】。2pY少儿编程网-https://www.pxcodes.com

2pY少儿编程网-https://www.pxcodes.com

本教程操作环境:windows7系统、javascript1.8.5版,DELL G3电脑。2pY少儿编程网-https://www.pxcodes.com

javascript设置select的方法:2pY少儿编程网-https://www.pxcodes.com

1、设置value为pxx的项选中2pY少儿编程网-https://www.pxcodes.com

$(".selector").val("pxx");

2、设置text为pxx的项选中2pY少儿编程网-https://www.pxcodes.com

$(".selector").find("option[text='pxx']").attr("selected",true);

这里有一个中括号的用法,中括号里的等号的前面是属性名称,不用加引号。很多时候,中括号的运用可以使得逻辑变得很简单。2pY少儿编程网-https://www.pxcodes.com

获取其值:2pY少儿编程网-https://www.pxcodes.com

1、获取当前选中项的value2pY少儿编程网-https://www.pxcodes.com

$(".selector").val();

2、获取当前选中项的text2pY少儿编程网-https://www.pxcodes.com

$(".selector").find("option:selected").text();

这里用到了冒号,掌握它的用法并举一反三也会让代码变得简洁。2pY少儿编程网-https://www.pxcodes.com

很多时候用到select的级联,即第二个select的值随着第一个select选中的值变化。这在jquery中是非常简单的。2pY少儿编程网-https://www.pxcodes.com

如: 2pY少儿编程网-https://www.pxcodes.com

$(".selector1").change(function(){ 
// 先清空第二个 
$(".selector2").empty(); 
// 实际的应用中,这里的option一般都是用循环生成多个了 
var option = $("<option>").val(1).text("pxx"); 
$(".selector2").append(option); 
});

Js操作Select大全2pY少儿编程网-https://www.pxcodes.com

判断select选项中 是否存在Value="paraValue"的Item2pY少儿编程网-https://www.pxcodes.com

向select选项中 加入一个Item2pY少儿编程网-https://www.pxcodes.com

从select选项中 删除一个Item2pY少儿编程网-https://www.pxcodes.com

删除select中选中的项2pY少儿编程网-https://www.pxcodes.com

修改select选项中 value="paraValue"的text为"paraText"2pY少儿编程网-https://www.pxcodes.com

设置select中text="paraText"的第一个Item为选中2pY少儿编程网-https://www.pxcodes.com

设置select中value="paraValue"的Item为选中2pY少儿编程网-https://www.pxcodes.com

得到select的当前选中项的value2pY少儿编程网-https://www.pxcodes.com

得到select的当前选中项的text2pY少儿编程网-https://www.pxcodes.com

得到select的当前选中项的Index2pY少儿编程网-https://www.pxcodes.com

清空select的项2pY少儿编程网-https://www.pxcodes.com

js 代码 2pY少儿编程网-https://www.pxcodes.com

// 1.判断select选项中 是否存在Value="paraValue"的Item 
function jsSelectIsExitItem(objSelect, objItemValue) { 
var isExit = false; 
for (var i = 0; i < objSelect.options.length; i++) { 
if (objSelect.options[i].value == objItemValue) { 
isExit = true; 
break; 
} 
} 
return isExit; 
} 
// 2.向select选项中 加入一个Item 
function jsAddItemToSelect(objSelect, objItemText, objItemValue) { 
//判断是否存在 
if (jsSelectIsExitItem(objSelect, objItemValue)) { 
alert("该Item的Value值已经存在"); 
} else { 
var varItem = new Option(objItemText, objItemValue); 
objSelect.options.add(varItem); 
alert("成功加入"); 
} 
} 
// 3.从select选项中 删除一个Item 
function jsRemoveItemFromSelect(objSelect, objItemValue) { 
//判断是否存在 
if (jsSelectIsExitItem(objSelect, objItemValue)) { 
for (var i = 0; i < objSelect.options.length; i++) { 
if (objSelect.options[i].value == objItemValue) { 
objSelect.options.remove(i); 
break; 
} 
} 
alert("成功删除"); 
} else { 
alert("该select中 不存在该项"); 
} 
} 
// 4.删除select中选中的项 
function jsRemoveSelectedItemFromSelect(objSelect) { 
var length = objSelect.options.length - 1; 
for(var i = length; i >= 0; i--){ 
if(objSelect[i].selected == true){ 
objSelect.options[i] = null; 
} 
} 
} 
// 5.修改select选项中 value="paraValue"的text为"paraText" 
function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) { 
//判断是否存在 
if (jsSelectIsExitItem(objSelect, objItemValue)) { 
for (var i = 0; i < objSelect.options.length; i++) { 
if (objSelect.options[i].value == objItemValue) { 
objSelect.options[i].text = objItemText; 
break; 
} 
} 
alert("成功修改"); 
} else { 
alert("该select中 不存在该项"); 
} 
} 
// 6.设置select中text="paraText"的第一个Item为选中 
function jsSelectItemByValue(objSelect, objItemText) { 
//判断是否存在 
var isExit = false; 
for (var i = 0; i < objSelect.options.length; i++) { 
if (objSelect.options[i].text == objItemText) { 
objSelect.options[i].selected = true; 
isExit = true; 
break; 
} 
} 
//Show出结果 
if (isExit) { 
alert("成功选中"); 
} else { 
alert("该select中 不存在该项"); 
} 
} 
// 7.设置select中value="paraValue"的Item为选中 
document.all.objSelect.value = objItemValue; 
// 8.得到select的当前选中项的value 
var currSelectValue = document.all.objSelect.value; 
// 9.得到select的当前选中项的text 
var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text; 
// 10.得到select的当前选中项的Index 
var currSelectIndex = document.all.objSelect.selectedIndex; 
// 11.清空select的项 
document.all.objSelect.options.length = 0; 

相关免费学习推荐:javascript视频教程2pY少儿编程网-https://www.pxcodes.com

以上就是javascript如何设置select的详细内容,更多请关注少儿编程网其它相关文章!2pY少儿编程网-https://www.pxcodes.com

来源:php中文网2pY少儿编程网-https://www.pxcodes.com


相关文章:

支持一下 ( )

javascript如何设置select

      匿名评论
    • 评论
    人参与,条评论
    javascript如何设置select

微信公众号

免费视频教程

先知道