ejemplo - select onchange javascript
Cómo pasar parámetros en onChange of html select (9)
solución jQuery
¿Cómo obtengo el valor de texto de una opción seleccionada?
Los elementos seleccionados suelen tener dos valores a los que desea acceder.
Primero está el valor que se enviará al servidor, que es fácil:
$( "#myselect" ).val();
// => 1
El segundo es el valor de texto de la selección.
Por ejemplo, usando el siguiente cuadro de selección:
<select id="myselect">
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Ms</option>
<option value="4">Dr</option>
<option value="5">Prof</option>
</select>
Si desea obtener la cadena "Mr" si se seleccionó la primera opción (en lugar de solo "1"), lo haría de la siguiente manera:
$( "#myselect option:selected" ).text();
// => "Mr"
Ver también
Soy un novato en JavaScript y jQuery. Quiero mostrar un combobox-A, que es un HTML <select> con su id y contenido seleccionado en el otro lugar en onChange ().
¿Cómo puedo pasar el cuadro combinado completo con su id selección, y cómo puedo pasar otros parámetros en el fuego del evento onChange?
Encontré útil la respuesta de @ Piyush, y para agregarle más, si crea programáticamente una selección, entonces hay una forma importante de obtener este comportamiento que puede no ser obvio. Supongamos que tiene una función y crea una nueva selección:
var changeitem = function (sel) {
console.log(sel.selectedIndex);
}
var newSelect = document.createElement(''select'');
newSelect.id = ''newselect'';
El comportamiento normal puede ser decir
newSelect.onchange = changeitem;
Pero esto realmente no le permite especificar ese argumento pasado, así que en su lugar puede hacer esto:
newSelect.setAttribute(''onchange'', ''changeitem(this)'');
Y puedes establecer el parámetro. Si lo haces de la primera manera, entonces el argumento que obtendrás para tu función onchange dependerá del navegador. La segunda forma parece funcionar bien entre navegadores cruzados.
Este código una vez que escribo para just just onChange event of select, puede guardar este código como html y ver que funciona. Y fácil de entender para usted.
<html>
<head>
<title>Register</title>
</head>
<body>
<script>
function show(){
var option = document.getElementById("category").value;
if(option == "Student")
{
document.getElementById("enroll1").style.display="block";
}
if(option == "Parents")
{
document.getElementById("enroll1").style.display="none";
}
if(option == "Guardians")
{
document.getElementById("enroll1").style.display="none";
}
}
</script>
<form action="#" method="post">
<table>
<tr>
<td><label>Name </label></td>
<td><input type="text" id="name" size=20 maxlength=20 value=""></td>
</tr>
<tr style="display:block;" id="enroll1">
<td><label>Enrollment No. </label></td>
<td><input type="number" id="enroll" style="display:block;" size=20 maxlength=12 value=""></td>
</tr>
<tr>
<td><label>Email </label></td>
<td><input type="email" id="emailadd" size=20 maxlength=25 value=""></td>
</tr>
<tr>
<td><label>Mobile No. </label></td>
<td><input type="number" id="mobile" size=20 maxlength=10 value=""></td>
</tr>
<tr>
<td><label>Address</label></td>
<td><textarea rows="2" cols="20"></textarea></td>
</tr>
<tr >
<td><label>Category</label></td>
<td><select id="category" onchange="show()"> <!--onchange show methos is call-->
<option value="Student">Student</option>
<option value="Parents">Parents</option>
<option value="Guardians">Guardians</option>
</select>
</td>
</tr>
</table><br/>
<input type="submit" value="Sign Up">
</form>
</body>
</html>
Esto me fue ayudado.
Para seleccionar:
$(''select_tags'').on(''change'', function() {
alert( $(this).find(":selected").val() );
});
Para radio / casilla de verificación:
$(''radio_tags'').on(''change'', function() {
alert( $(this).find(":checked").val() );
});
Otro enfoque que puede ser útil en algunas situaciones, es pasar el valor de la <option /> directamente a la función como esta:
<select onChange="myFunction(this.options[this.selectedIndex].value)">
<option value="1">Text 1</option>
<option value="2">Text 2</option>
</select>
Para saber cómo hacerlo en jQuery:
<select id="yourid">
<option value="Value 1">Text 1</option>
<option value="Value 2">Text 2</option>
</select>
<script src="jquery.js"></script>
<script>
$(''#yourid'').change(function() {
alert(''The option with value '' + $(this).val() + '' and text '' + $(this).text() + '' was selected.'');
});
</script>
También debe saber que Javascript y jQuery no son idénticos. jQuery es un código JavaScript válido, pero no todo el JavaScript es jQuery. Debe buscar las diferencias y asegurarse de estar utilizando la adecuada.
Puedes probar el código de abajo
<select onchange="myfunction($(this).val())" id="myId">
</select>
Seleccione un auto nuevo de la lista. Cuando selecciona un automóvil nuevo, se activa una función que genera el valor del automóvil seleccionado.
<!DOCTYPE html>
<html>
<body>
<select id="mySelect" onchange="myFunction(this)">
<option value="Audi">Audi
<option value="BMW">BMW
<option value="Mercedes">Mercedes
<option value="Volvo">Volvo
</select>
<p id="demo"></p>
<script>
function myFunction(selectObject) {
var x = selectObject.value;
document.getElementById("demo").innerHTML = "You selected: " + x;
}
</script>
</body>
</html>
Arreglo de JavaScript, para cada bucle y selección de cambio
<!DOCTYPE html>
<html>
<body>
<p id="select"></p>
<script>
var txt = "";
var person = {id1:"John", id2:"Doe", id3:"John Doe"};
var x;
text = "<select id=''mySelect'' onchange=''myFunction()''>";
for (x in person) {
text += "<option value=''" + x + "''>" + person[x] + "</option>";
}
text += "</select>";
document.getElementById("select").innerHTML = text;
</script>
<p id="text"></p>
<script>
function myFunction() {
var x = document.getElementById("mySelect").value;
document.getElementById("text").innerHTML = "You selected: " + x + " as value";
}
</script>
</body>
</html>
function getComboA(selectObject) {
var value = selectObject.value;
}
<select id="comboA" onchange="getComboA(this)">
<option value="">Select combo</option>
<option value="Value1">Text1</option>
<option value="Value2">Text2</option>
<option value="Value3">Text3</option>
</select>
El ejemplo anterior le proporciona el valor seleccionado del cuadro combinado en el evento OnChange .