How to set select in javascript-JS Tutorial-php.cn

How to set select in javascript

coldplay.xixi

Release： 2023-01-04 09:35:40

Original

4790 people have browsed it

How to set select in javascript: 1. Set the item with value to pxx to select, the code is [$(".selector").val("pxx")]; 2. Set the item with text to pxx to select , the code is [$(".selector").find..].

How to set select in javascript

The operating environment of this tutorial: Windows 7 system, JavaScript version 1.8.5, DELL G3 computer.

How to set select in javascript:

1. Select the item with value set to pxx

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

Copy after login

2. Select the item with text set to pxx

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

Copy after login

There is a usage of square brackets. The equal sign in the square brackets is preceded by the attribute name without quotation marks. Many times, the use of square brackets can make logic very simple.

Get its value:

1. Get the value of the currently selected item

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

Copy after login

2. Get the text of the currently selected item

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

Copy after login

Colon is used here , mastering its usage and drawing inferences from one example will also make the code simpler.

The cascade of selects is often used, that is, the value of the second select changes with the value selected by the first select. This is very simple in jquery.

For example:

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

Copy after login

Js Select operation list

Determine whether there is an Item with Value="paraValue" in the select option

Add an Item to the select option

Delete an Item from the select option

Delete the selected item in the select option

Modify the text of value="paraValue" in the select option to "paraText"

Set the first Item with text="paraText" in the select to be selected

Set the Item with value="paraValue" in the select to be selected

Get select The value of the currently selected item

Get the text of the currently selected item of select

Get the Index of the currently selected item of select

Clear the selected item

js code

// 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;

Copy after login

Related free learning recommendations: javascript video tutorial

The above is the detailed content of How to set select in javascript. For more information, please follow other related articles on the PHP Chinese website!