How to force the "change" event of an input select, even without choosing another value?

Asked

Viewed 5,325 times

1

Are two problems:

1 - When loading an input select I tried to use a Trigger to force "change", but it did not take effect.

2 - I have 2 selects. When I actually change the value of the first, the change event is called and "hides" values of the other select, but if the value that was hidden is the current selected it does not disappear from the combo, only from the list.

How to make the initial change work and how to make the items I tried to hide disappear correctly?

Follow the fiddle code for error checking: http://jsfiddle.net/T52EE/

JS:

$("#cb").trigger("change");
$("#cb").on("change", function(){
    var cb1val = $(this).val();
    $("#cb2 option").each(function(){
        if($(this).val() <= cb1val){
             $(this).hide();   
        }
        else{
            $(this).show();
        }            
    });
});

HTML:

<select id="cb">
    <option value="0">Valor 1</option>
    <option value="1">Valor 2</option>
    <option value="2">Valor 3</option>
    <option value="3">Valor 4</option>
    <option value="4">Valor 5</option>
</select>

<select id="cb2">
    <option value="0">Valor 1</option>
    <option value="1">Valor 2</option>
    <option value="2">Valor 3</option>
    <option value="3">Valor 4</option>
    <option value="4">Valor 5</option>
</select>
javascript jquery html

  • The second problem is a little confusing.

  • I updated the fiddle. When I select "Value 1" in the first select "Value 1" must be hidden from the second select. But he keeps appearing, just disappears from the list. At least on Chrome.

  • Ready edited the reply

  • The first problem was that the forced no change should be after the change function. And he checked this. And the second problem I explained in the comment of your answer and based on his to do the way I expected. Anyway thank you very much.

2 answers

3


Only simulates the change as follows:

$("selector").change();

Change the JS to:

$("#cb").change(function(){
    var cb1val = $(this).val();
    $("#cb2 option").each(function(){
        if($(this).val() <= cb1val){
             $(this).hide();   
        }
        else{
            $(this).show();
        }            
    });
    //Resposta pergunta 2
    $("#cb2 option[value="+cb1val+"]").attr("selected","selected");
});
$("#cb").change();

  • I tested it on my fiddle and it didn’t work either.

  • Really $("#cb"). change(); has to be after the change function. Thank you.

  • And on problem number two you could help me?

  • @Joaopaulo answered me here

  • $("#cb2 option[value="+cb1val+"]"). attr("Selected","Selected"); added this line in my answer this will solve your problem.

  • I did a little different, but it was worth the idea. cb1val++;$("#cb2 option[value="+cb1val+"]). prop("Selected",true);

Show 1 more comment

1

With pure javascript you can use the onchange()

document.getElementById("cb").onchange();

The second problem is solved like this:

$(this).show().attr('selected',true); // assim você seleciona o item que pode ser exibido

  • Thanks swallow, I even tried but this last line selected the last record of the select and not the next. The result I would like this on my fiddle updated.

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.