javascript - texto - selected option jquery
¿Cómo establecer selectedIndex del elemento seleccionado usando el texto de visualización? (7)
¿Cómo establecer selectedIndex del elemento seleccionado usando el texto de la pantalla como referencia?
Ejemplo:
<input id="AnimalToFind" type="text" />
<select id="Animals">
<option value="0">Chicken</option>
<option value="1">Crocodile</option>
<option value="2">Monkey</option>
</select>
<input type="button" onclick="SelectAnimal()" />
<script type="text/javascript">
function SelectAnimal()
{
//Set selected option of Animals based on AnimalToFind value...
}
</script>
¿Hay alguna otra manera de hacer esto sin un bucle? Ya sabes, estoy pensando en un código JavaScript incorporado o algo así. Además, no uso jQuery ...
Agregue el atributo de nombre a su opción:
<option value="0" name="Chicken">Chicken</option>
Con eso puede usar el valor HTMLOptionsCollection.namedItem ("Chicken"). Para establecer el valor de su elemento de selección.
Prueba esto:
function SelectAnimal()
{
var animals = document.getElementById(''Animals'');
var animalsToFind = document.getElementById(''AnimalToFind'');
// get the options length
var len = animals.options.length;
for(i = 0; i < len; i++)
{
// check the current option''s text if it''s the same with the input box
if (animals.options[i].innerHTML == animalsToFind.value)
{
animals.selectedIndex = i;
break;
}
}
}
Prueba esto:
function SelectAnimal() {
var sel = document.getElementById(''Animals'');
var val = document.getElementById(''AnimalToFind'').value;
for(var i = 0, j = sel.options.length; i < j; ++i) {
if(sel.options[i].innerHTML === val) {
sel.selectedIndex = i;
break;
}
}
}
Puede establecer el índice con este código:
sel.selectedIndex = 0;
pero recuerde una advertencia en esta práctica, no podrá llamar al método onclick del servidor si selecciona el valor anterior seleccionado en el menú desplegable.
Puede usar HTMLOptionsCollection.namedItem () Esto significa que debe definir sus opciones de selección para tener un atributo de nombre y tener el valor del texto que se muestra. por ejemplo, California
Si quiere esto sin bucles o jquery, podría usar lo siguiente. Esto es directamente en JavaScript. Esto funciona para los navegadores web actuales. Dada la edad de la pregunta, no estoy seguro de si esto hubiera funcionado en 2011. Tenga en cuenta que el uso de selectores de estilo CSS es extremadamente potente y puede ayudar a acortar una gran cantidad de código.
// Please note that querySelectorAll will return a match for
// for the term...if there is more than one then you will
// have to loop through the returned object
var selectAnimal = function() {
var animals = document.getElementById(''animal'');
if (animals) {
var x = animals.querySelectorAll(''option[value="frog"]'');
if (x.length === 1) {
console.log(x[0].index);
animals.selectedIndex = x[0].index;
}
}
}
<html>
<head>
<title>Test without loop or jquery</title>
</head>
<body>
<label>Animal to select
<select id=''animal''>
<option value=''nothing''></option>
<option value=''dog''>dog</option>
<option value=''cat''>cat</option>
<option value=''mouse''>mouse</option>
<option value=''rat''>rat</option>
<option value=''frog''>frog</option>
<option value=''horse''>horse</option>
</select>
</label>
<button onclick="selectAnimal()">Click to select animal</button>
</body>
</html>
document.getElementById (''Animal''). querySelectorAll (''option [value = "searchterm"]''); en el objeto de índice ahora puede hacer lo siguiente: x [0] .index
<script type="text/javascript">
function SelectAnimal(){
//Set selected option of Animals based on AnimalToFind value...
var animalTofind = document.getElementById(''AnimalToFind'');
var selection = document.getElementById(''Animals'');
// select element
for(var i=0;i<selection.options.length;i++){
if (selection.options[i].innerHTML == animalTofind.value) {
selection.selectedIndex = i;
break;
}
}
}
</script>
establecer la propiedad selectedIndex de la etiqueta de selección elegirá el elemento correcto. es una buena idea de que, en lugar de comparar los dos valores (opciones innerHTML y& animal value), puede usar el método indexOf () o la expresión regular para seleccionar la opción correcta a pesar de que la cubierta o la presencia de espacios
selection.options[i].innerHTML.indexOf(animalTofind.value) != -1;
o usando .match(/regular expression/)