Maison > interface Web > js tutoriel > Comment définir la sélection en javascript

Comment définir la sélection en javascript

coldplay.xixi
Libérer: 2023-01-04 09:35:40
original
4788 Les gens l'ont consulté

Comment définir la sélection en JavaScript : 1. Définissez l'élément avec la valeur pxx à sélectionner, le code est [$(".selector").val("pxx")]; avec le texte à pxx à sélectionner, le code est [$(".selector").find..].

Comment définir la sélection en javascript

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur DELL G3.

Comment définir la sélection en JavaScript :

1. Sélectionnez l'élément avec la valeur pxx

$(".selector").val("pxx");
Copier après la connexion

2. Sélectionnez l'élément avec le texte comme pxx.

$(".selector").find("option[text='pxx']").attr("selected",true);
Copier après la connexion

Voici une utilisation des crochets. Le signe égal entre crochets est précédé du nom de l'attribut sans guillemets. Souvent, l’utilisation de crochets peut rendre la logique très simple.

Obtenir sa valeur :

1. Obtenir la valeur de l'élément actuellement sélectionné

$(".selector").val();
Copier après la connexion

2 Obtenir le texte de l'élément actuellement sélectionné

$(".selector").find("option:selected").text();
Copier après la connexion

. Deux points sont utilisés ici, maîtriser son utilisation et tirer des conclusions à partir d'un exemple simplifiera également le code.

La cascade de sélections est souvent utilisée, c'est-à-dire que la valeur de la deuxième sélection change avec la valeur sélectionnée par la première sélection. C'est très simple en jquery.

Par exemple :

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

Opération Js Sélectionnez l'encyclopédie

Déterminez s'il existe un élément avec Value="paraValue" dans l'option de sélection

Ajouter un élément à l'option de sélection

Supprimer un élément de l'option de sélection

Supprimer l'élément sélectionné dans l'option de sélection

Modifier le texte de la valeur= "paraValue" dans l'option de sélection sur "paraText"

Définissez le premier élément avec text="paraText" dans la sélection à sélectionner

Définissez l'élément avec value="paraValue" dans le select pour être sélectionné

Obtenir select La valeur de l'élément actuellement sélectionné

Obtient le texte de l'élément actuellement sélectionné de select

Obtient l'index de l'élément actuellement sélectionné de select

Efface l'élément sélectionné

code js

// 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;
Copier après la connexion

Recommandations d'apprentissage gratuites associées : Tutoriel vidéo javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal