Run Change Event for Select Even When Same Option Is Reselected

Run change event for select even when same option is reselected

If you mean selecting with the mouse, you can use mouseup. However, it will fire when the select box is being opened as well, so you'll need to keep track of the amount of times it was fired (even: select is being opened, odd: select is being closed): http://jsfiddle.net/T4yUm/2/.

$("select").mouseup(function() {
    var open = $(this).data("isopen");

    if(open) {
        alert(1);
    }

    $(this).data("isopen", !open);
});

How can I trigger the same option again?

Add a blank value and reset the select which won't trigger the change event.

I think you've already asked this question here.

$(document).on('change', '.item-select', function() {  var optionValue = $(this).val();  $('option', this).first().prop('selected', true)  alert(optionValue);});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="item-select">  <option>Select make...</option>  <option value="volvo">Volvo</option>  <option value="saab">Saab</option>  <option value="mercedes">Mercedes</option>  <option value="audi">Audi</option></select>

Fire change() event even when selection hasn't changed

You can try like this:-

HTML :

<select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select> 

JS :

$("select").mouseup(function() {
    var flag = $(this).data("flag");
        var cur_val = $(this).val();
    if(flag) {
        alert(cur_val);
    }
    $(this).data("flag", !flag);
});

Here is working jsfiddle.

Give it a try, this should work.

Handle event fired when selected drop down option is selected again

try:

$(document).on('mouseup', '[id*=select1]', function () {
    alert('in change select1');
});

demo

Event for selecting an option even though value is not changed in dijit.form.Select.

You can Capture the 'onExecute' event of the dropDown of the dijit.form.Select widget for this behaviour. However, keep in mind that you wont get the newVal as an argument to the function for this event. to get the new value, use the following line as the first line of your function:

var newVal = this.focusedChild.option.value;

This will work for sure :)

How to receive an event when selected option is the already selected option of a dropdown?

Working Solution:

First you have to explicitly set the first item to a selected state.

<select id="myoptions">
  <option id="one" selected="selected">Option 1</option>
  <option id="two">Option 2</option>
</select>

Then in your JavaScript you must explicitly remove the selected attribute.

$('#myoptions option:selected').removeAttr('selected');

$("#myoptions").on("change", function(){
    console.debug($('#myoptions').find('option:selected').val());
});

This will then show a blank/empty drop down box on initialization. Which will allow you to select the first item in the list the first time you click on the dropdown because no option has the selected attribute anymore.

This has the benefit of having the look of a blank placeholder selection without actually having to have one and write all the convoluted logic to handle when it gets selected.

CodePen working example of the solution. Be sure and have your JavaScript debug console open before you click on the link or you won't see the desired effect.

This still doesn't solve the reselection issue that so many other people have asked about which is a similar problem, which I would like to use as a refresh mechanism, but I will tackle that in another question.

ReactJS - trigger event even if the same option is selected from select dropdown

This is trick, but if you need to fire function with the all changes, even with change of the same option, only one solution I know - use onClick and its detail:

class Select extends React.Component{
    onChangeOption(e){
        if (e.detail === 0){
            console.log(e.target.value);
        }
    }
    render(){
        return (
            <select name="select1" onClick={this.onChangeOption}>
                <option value='A'>Please select A...</option>
                <option value='B'>Please select B...</option>
                <option value='C'>Please select C...</option>
                <option value='D'>Please select D...</option>
            </select>
        )
    }
}

https://jsfiddle.net/69z2wepo/86140/

---

Related Topics