change - select html selected value javascript
¿Hay un evento onSelect o equivalente para HTML<select>? (28)
Tengo un formulario de entrada que me permite seleccionar entre varias opciones y hacer algo cuando el usuario cambia la selección. P.ej,
<select onChange="javascript:doSomething();">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
Ahora, doSomething() solo se activa cuando cambia la selección.
Quiero activar doSomething() cuando el usuario selecciona cualquier opción, posiblemente la misma otra vez.
He intentado usar un controlador "onClick", pero eso se dispara antes de que el usuario inicie el proceso de selección.
Entonces, ¿hay alguna manera de activar una función en cada selección por parte del usuario?
Actualizar:
La respuesta sugerida por Darryl pareció funcionar, pero no funciona de manera consistente. A veces, el evento se activa tan pronto como el usuario hace clic en el menú desplegable, ¡incluso antes de que el usuario haya terminado el proceso de selección!
¿Qué hay de cambiar el valor de la selección cuando el elemento gana el foco, por ejemplo (con jquery):
$("#locationtype").focus(function() {
$("#locationtype").val('''');
});
$("#locationtype").change(function() {
if($("#locationtype").val() == 1) {
$(".bd #mapphp").addClass(''show'');
$("#invoerform").addClass(''hide'');
}
if($("#locationtype").val() == 2) {
$(".lat").val('''');
$(".lon").val('''');
}
});
Aquí está la manera más simple:
<select name="ab" onchange="if (this.selectedIndex) doSomething();">
<option value="-1">--</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>
Funciona tanto con la selección del mouse como con las teclas arriba / abajo del teclado cuando se selecciona focus.
Aquí está mi solución, completamente diferente a cualquier otra aquí. Utiliza la posición del mouse para determinar si se hizo clic en una opción y se opuso a hacer clic en el cuadro de selección para abrir el menú desplegable. Hace uso de la posición event.screenY ya que es la única variable de navegador cruzada confiable. Primero, debe asociarse un evento de desplazamiento para que pueda determinar la posición de los controles en relación con la pantalla antes del evento de clic.
var select = $("select");
var screenDif = 0;
select.bind("hover", function (e) {
screenDif = e.screenY - e.clientY;
});
select.bind("click", function (e) {
var element = $(e.target);
var eventHorizon = screenDif + element.offset().top + element.height() - $(window).scrollTop();
if (e.screenY > eventHorizon)
alert("option clicked");
});
Aquí está mi jsFiddle http://jsfiddle.net/sU7EV/4/
Así que mi objetivo era poder seleccionar el mismo valor varias veces, lo que esencialmente sobrescribe la función onchange () y convertirlo en un útil método onclick ().
En base a las sugerencias anteriores, se me ocurrió esto que funciona para mí.
<select name="ab" id="hi" onchange="if (typeof(this.selectedIndex) != undefined) {alert($(''#hi'').val()); this.blur();}" onfocus="this.selectedIndex = -1;">
<option value="-1">--</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>
Descubrí esta solución.
establezca inicialmente el índice seleccionado del elemento seleccionado en 0
//set selected Index to 0
doSomethingOnChange(){
blah ..blah ..
set selected Index to 0
}
llama a este método en el evento Change
El enfoque onclick no es del todo malo, pero como se dijo, no se activará cuando el valor no se modifique con un clic del mouse.
Sin embargo, es posible activar el evento onclick en el evento onchange.
<select onchange="{doSomething(...);if(this.options[this.selectedIndex].onclick != null){this.options[this.selectedIndex].onclick(this);}}">
<option onclick="doSomethingElse(...);" value="A">A</option>
<option onclick="doSomethingElse(..);" value="B">B</option>
<option onclick="doSomethingElse(..);" value="Foo">C</option>
</select>
En realidad, los eventos onclick NO se dispararán cuando el usuario use el teclado para cambiar la selección en el control de selección. Es posible que deba usar una combinación de onChange y onClick para obtener el comportamiento que está buscando.
Hace mucho tiempo, pero en respuesta a la pregunta original, ¿esto ayudaría? Simplemente onClick en onClick en la línea SELECT . Luego, ponga lo que quiera que cada OPTION haga en las líneas de OPTION . es decir:
<SELECT name="your name" onClick>
<option value ="Kilometres" onClick="YourFunction()">Kilometres
-------
-------
</SELECT>
La única respuesta verdadera es no usar el campo de selección (si necesita hacer algo cuando vuelve a seleccionar la misma respuesta).
Cree un menú desplegable con div convencional, botón, menú de mostrar / ocultar. Enlace: https://www.w3schools.com/howto/howto_js_dropdown.asp
Podría haberse evitado si uno hubiera podido agregar oyentes de eventos a las opciones. Si ha habido un oyente onSelect para el elemento seleccionado. Y si al hacer clic en el campo de selección no se disparaba desagradablemente mousedown, mouseup, y hacer clic todo al mismo tiempo en mousedown.
Lo maravilloso de la etiqueta de selección (en este escenario) es que tomará su valor de las etiquetas de opción.
Tratar:
<select onChange="javascript:doSomething(this.value);">
<option value="A">A</option>
<option value="B">B</option>
<option value="Foo">C</option>
</select>
Trabajó decente para mí.
Lo que funciona para mí:
<select id=''myID'' onchange=''doSomething();''>
<option value=''0'' selected> Select Option </option>
<option value=''1'' onclick=''if (!document.getElementById("myID").onchange()) doSomething();'' > A </option>
<option value=''2'' onclick=''if (!document.getElementById("myID").onchange()) doSomething();'' > B </option>
</select>
De esa forma, onchange llama a ''doSomething ()'' cuando la opción cambia, y hace clic en ''doSomething ()'' cuando onchange event es falso, en otras palabras, cuando selecciona la misma opción
Lo que hice cuando me enfrenté a un problema similar es que agregué un''enfoque ''al cuadro de selección que agrega una nueva opción genérica ('' seleccionar una opción ''o algo similar) y la predetermina como la opción seleccionada.
Me enfrenté a una necesidad similar y terminé escribiendo una directiva angularjs para el mismo -
element[0].blur(); usado element[0].blur(); para quitar el foco de la etiqueta de selección. La lógica es desencadenar esta falta de definición en el segundo clic del menú desplegable.
as-select se activa incluso cuando el usuario selecciona el mismo valor en el menú desplegable.
DEMO - link
Necesitaba algo exactamente igual. Esto es lo que funcionó para mí:
<select onchange="doSomething();" onfocus="this.selectedIndex = -1;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
Apoya esto:
cuando el usuario selecciona cualquier opción, posiblemente la misma otra vez
Para lanzar un evento correctamente cada vez que el usuario selecciona algo (incluso la misma opción), solo tiene que engañar al cuadro de selección.
Como han dicho otros, especifique un negativeIndex selectedIndex en el enfoque para forzar el evento de cambio. Si bien esto le permite engañar al cuadro de selección, no funcionará después de eso, siempre que todavía tenga foco. La solución simple es forzar el cuadro de selección para desenfocar, que se muestra a continuación.
Estándar JS / HTML:
<select onchange="myCallback();" onfocus="this.selectedIndex=-1;this.blur();">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
Plugin jQuery:
<select>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<script type="text/javascript">
$.fn.alwaysChange = function(callback) {
return this.each(function(){
var elem = this;
var $this = $(this);
$this.change(function(){
if(callback) callback($this.val());
}).focus(function(){
elem.selectedIndex = -1;
elem.blur();
});
});
}
$(''select'').alwaysChange(function(val){
// Optional change event callback,
// shorthand for $(''select'').alwaysChange().change(function(){});
});
</script>
Puedes ver una demostración en funcionamiento aquí .
Prueba esto:
<select id="nameSelect" onfocus="javascript:document.getElementById(''nameSelect'').selectedIndex=-1;" onchange="doSomething(this);">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
Pruebe esto (el evento se desencadena exactamente cuando selecciona la opción, sin cambiar la opción):
$("select").mouseup(function() {
var open = $(this).data("isopen");
if(open) {
alert(''selected'');
}
$(this).data("isopen", !open);
});
Puede usar onChange: http://www.w3schools.com/TAGS/tag_Select.asp
Copiado de http://www.faqs.org/docs/htmltut/forms/_SELECT_onChange.html onChange designa un JavaScript para ejecutarse cuando el usuario elige una de las opciones. Esto significa que una acción se inicia inmediatamente cuando el usuario elige un elemento, no cuando se presiona un botón "enviar".
Si realmente necesita que esto funcione de esta manera, lo haría (para garantizar que funcione con el teclado y el mouse)
- Agregue un controlador de eventos en foco a la selección para establecer el valor "actual"
- Agregue un controlador de eventos onclick al seleccionar para manejar los cambios del mouse
- Agregue un controlador de eventos onkeypress a la selección para manejar los cambios del teclado
Lamentablemente, el clic se ejecutará varias veces (por ejemplo, al activar la selección ... y al seleccionar / cerrar) y la tecla de encendido podrá dispararse cuando no cambie nada ...
<script>
function setInitial(obj){
obj._initValue = obj.value;
}
function doSomething(obj){
//if you want to verify a change took place...
if(obj._initValue == obj.value){
//do nothing, no actual change occurred...
//or in your case if you want to make a minor update
doMinorUpdate();
} else {
//change happened
getNewData(obj.value);
}
}
</script>
<select onfocus="setInitial(this);" onclick="doSomething();" onkeypress="doSomething();">
...
</select>
Solo una idea, pero ¿es posible poner un clic en cada elemento de la <option> ?
<select>
<option onclick="doSomething(this);">A</option>
<option onclick="doSomething(this);">B</option>
<option onclick="doSomething(this);">C</option>
</select>
Otra opción podría ser usar onblur en la selección. Esto se activará cada vez que el usuario haga clic fuera de la selección. En este punto, puede determinar qué opción se seleccionó. Para que esto se dispare incluso en el momento correcto, el clic de la opción podría desenfocar el campo (hacer que otra cosa esté activa o simplemente .blur () en jQuery).
Tenga en cuenta que los controladores de eventos no son compatibles con la etiqueta OPTION en IE, con una forma de pensar rápida. Se me ocurrió esta solución, pruébelo y denme sus comentarios:
<script>
var flag = true;
function resetIndex(selObj) {
if(flag) selObj.selectedIndex = -1;
flag = true;
}
function doSomething(selObj) {
alert(selObj.value)
flag = false;
}
</script>
<select onchange="doSomething(this)" onclick="resetIndex(this)">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
Lo que estoy haciendo aquí es reiniciar el índice de selección para que el evento onchange se active siempre, es cierto que perdemos el elemento seleccionado al hacer clic y puede ser molesto si su lista es larga, pero puede ayudarlo de alguna manera ..
Tuve el mismo problema cuando estaba creando un diseño hace unos meses. La solución que encontré fue usar .live("change", function()) en combinación con .blur() en el elemento que está utilizando.
Si desea que haga algo cuando el usuario simplemente hace clic, en lugar de cambiar, simplemente reemplace el change con un click .
Le asigné a mi lista desplegable una identificación, selected y usé lo siguiente:
$(function () {
$("#selected").live("change", function () {
// do whatever you need to do
// you want the element to lose focus immediately
// this is key to get this working.
$(''#selected'').blur();
});
});
Vi que este no tenía una respuesta seleccionada, así que pensé en dar mi opinión. Esto funcionó de manera excelente para mí, así que espero que alguien más pueda usar este código cuando se estanquen.
Editar: use el selector on en lugar de .live . Ver jQuery .on ()
Vamos a expandir la respuesta de jitbit. Lo encontré raro cuando hiciste clic en el menú desplegable y luego hiciste clic en el menú desplegable sin seleccionar nada. Terminó con algo como:
var lastSelectedOption = null;
DDChange = function(Dd) {
//Blur after change so that clicking again without
//losing focus re-triggers onfocus.
Dd.blur();
//The rest is whatever you want in the change.
var tcs = $("span.on_change_times");
tcs.html(+tcs.html() + 1);
$("span.selected_index").html(Dd.prop("selectedIndex"));
return false;
};
DDFocus = function(Dd) {
lastSelectedOption = Dd.prop("selectedIndex");
Dd.prop("selectedIndex", -1);
$("span.selected_index").html(Dd.prop("selectedIndex"));
return false;
};
//On blur, set it back to the value before they clicked
//away without selecting an option.
//
//This is what is typically weird for the user since they
//might click on the dropdown to look at other options,
//realize they didn''t what to change anything, and
//click off the dropdown.
DDBlur = function(Dd) {
if (Dd.prop("selectedIndex") === -1)
Dd.prop("selectedIndex", lastSelectedOption);
$("span.selected_index").html(Dd.prop("selectedIndex"));
return false;
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="Dd" onchange="DDChange($(this));" onfocus="DDFocus($(this));" onblur="DDBlur($(this));">
<option>1</option>
<option>2</option>
</select>
<br/>
<br/>Selected index: <span class="selected_index"></span>
<br/>Times onchange triggered: <span class="on_change_times">0</span>
Esto tiene más sentido para el usuario y permite que JavaScript se ejecute cada vez que seleccione cualquier opción, incluida una opción anterior.
La desventaja de este enfoque es que rompe la capacidad de tabular en un menú desplegable y usa las teclas de flecha para seleccionar el valor. Esto fue aceptable para mí, ya que todos los usuarios hacen clic en todo todo el tiempo hasta el final de la eternidad.
deberías intentar usar la option:selected
$("select option:selected").click(doSomething);
en primer lugar, use onChange como controlador de eventos y luego use la variable de indicador para que haga la función que desea cada vez que realiza un cambio
<select
var list = document.getElementById("list");
var flag = true ;
list.onchange = function () {
if(flag){
document.bgColor ="red";
flag = false;
}else{
document.bgColor ="green";
flag = true;
}
}
<select id="list">
<option>op1</option>
<option>op2</option>
<option>op3</option>
</select>
usar jquery:
<select class="target">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<script>
$(''.target'').change(function() { doSomething(); });
</script>
<script>
function abc(selectedguy) {
alert(selectedguy);
}
</script>
<select onchange="abc(this.selectedIndex);">
<option>option one</option>
<option>option two</option>
</select>
Aquí tiene el índice devuelto, y en el código js puede usar este retorno con un interruptor o cualquier cosa que desee.
<select name="test[]"
onchange="if(this.selectedIndex < 1){this.options[this.selectedIndex].selected = !1}">
<option>1</option>
<option>2</option>
<option>3</option>
</select>