I have a dropdown list. I am using onchange event of this dropdown to show some text in a textbox below.
Its perfectly fine, but I want to to do something like this:---
If user click on the drop down then the whole list will be populated. right.. Now if he is trying to choose the value from the list using up/down arrow button of the key board I want to fire the event at that time. How can I do this?
Onchange is not working for this purpose.
You can do something like this:
<script type="text/javascript">
function change(value){
alert("key pressed "+value)
}
</script>
<select name="k" onkeypress="change(this.value)">
<option value="acb">ABC</option>
<option value="def">DEF</option>
</select>
You have the onkeydown event. MSDN
In your case, onchange will be raised when the select list loses the focus.
Related
I have a <select> field like the below:
<select id="my-list" class="default">
<option value=0 selected disabled>Select an item</option>
<option value=1>First Item</option>
<option value=2>Second Item</option>
<option value=3>Third Item</option>
</select>
The default class on the <select> element sets the color to red (indicating to the user that an option needs to be selected here).
Once the user selects an item the class is removed so the color changes to black.
Now what I'm trying to achieve is that the color changes as soon as the text in the select box changes. The onchange event only fires if the user clicks on an item in the list or presses ENTER or the element loses focus.
But if the user hits S for example the text will change to "Second item" and the color remains red until he presses ENTER or tabs out of the field.
Listening for keydown events doesn't work because if the user hits say X the event fires but the text won't change because there is no matching item.
One possible solution could be to use the keydown event and then compare the text to "Select an item" though it doesn't seem very elegant. And how would I get the text that is displayed? jQuery's .text() or .html() return all the options, not just what is displayed.
After writing the last paragraph of my question the answer came to me.
Typing into a select box or using the up and down arrow keys will set the selected attribute to the option displayed. Using the keyup event instead of the keydown event can then be used to simply check the value of the selected option and if it's not 0 the class is removed and the color changes.
$("#my-list").keyup(function(){
if ($("#my-list option:selected").val() !== 0){
$("#my-list").removeClass("default");
}
});
It seems a bit clumsy so perhaps there is a better way, but it works.
I have a target website where there is the following dropdown menu.
<select class="categories-options" data-level="1" name="level1-option" id="level1-option" required="">
<option value="">default</option>
<option value="p1" data-href="/callback/p1">P1</option>
<option value="p2" data-href="/callback/p2">P2</option>
<option value="p3" data-href="/callback/p3">P3</option>
</select>
When an item is selected from the menu, it triggers a "change" event and a function is called when this event happens. I have debugged the event using Chrome and you can see the debugging output when I selected an item from the dropdown menu. I have taken a screenshot from the debugger.
Now, let me explain what I am trying to do. I use a javascript function to select an item from the dropdown menu using the following code:
var id= document.getElementById('level1-option');
setSelectedValue(id, "p2");
$('#level1-option').trigger("select");
In the last line, I try to trigger the same event that happens originally in the webpage as if I manually selected the item. however, it doesn't trigger anything. |I see in the debug output that the event is triggered by class. I have tried many different things but didn't work. Could anyone shed some light on this issue? How can I trigger the same event that happens in that webpage using jquery or javascript?
Your code:
$('#level1-option').trigger("select");
...will trigger an event called select (which isn't related to the value of a form field change), but the event you stopped on in the debugger is change, not select:
If you want to trigger the change event, trigger the change event:
$('#level1-option').trigger("change");
// Difference is here -------^
Side note: Because you're using jQuery, your code can be simpler, you dont need the getElementById or the setSelectedValue:
$('#level1-option').val("p2").trigger("change");
Try this
$('#level1-option').trigger("change");
I'm looking for a solution beside mouseover so the detection is also effective with arrow up/down button.
you can use the change event - http://api.jquery.com/change/ which will be triggered when the selected value changes
$("select").change(function (){});
Here is my simple code:
$(".test").change(function(){
alert("user clicked");
});
<select class="test">
<option value="1">test1</option>
<option value="2">test2</option>
</select>
It's all simple and working, but I want to get that function called not only when user changes option, but when he clicks on the same option that is already selected, I've tried click event but it gets fired up before user even clicka on any option, what could I do?
doesn't work in chrome.
$(".test option").click(function(e){
console.log('click');
});
updated your fiddle.
put the click on the option
EDIT: looks like it isn't possible without a bunch of work like using click on the select and comparing the location it was clicked or something hokey like that.
I am not sure what the end goal is, but the click on the select might work if you can do the processing one extra time when they initially click into it.
another article on it:
If you mean that there is only one thing in the select (like in the problem I was having), you could create a default disabled option, and set that as the selected. This would mean that if you had one option, onchange would fire because the disabled was the one that was previously selected:
<option disabled selecte>Select an option</option>
<option> Only Option </option>
I am little confused about this: How can you trigger the javascript event onChange of a select box if there is only one option in it?
add a default empty option like Select...
<select>
<option>Select...</option>
<option value="val_1">Option 1</option>
</select>
If you have only one value, it won't change, but if they focus on it, and then click out of it, the onBlur event will trigger.
Was that what you needed? http://jsfiddle.net/j3Xga/1/ I know this is not a jQuery question.