Question

When I click my submit button, I only want it to show/hide the divs if the value of the select option is 2-6. If the value is 1 (disabled option) I do not want the button click to do anything.

<select id="brand_bu" name="selected" class="form-control" onchange="panelHeader()">
    <option value="1" disabled selected>Please Select a Option..</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
</select>

<span class="input-group-btn">
    <button class="btn btn-primary" id="submit" type="button">Refresh Table</button>
</span>

This is my original j query code: Here, on click it hides and shows the approriate divs. I want to make it so that on click, the disabled value does NOTHING, and only works if any other value is selected in the dropdown.

$(document).ready(function() {
    $("#submit").click(function(){
        $("#hide").hide();
        $("#show").show();
    });
});

I have modified and come up with this but it is still not right. As soon as the option value changes, the events are triggered and happen before the button click. I want to add a button click in this function correctly so that

1) If option value=1 is selected, nothing happens when the button is clicked 2) events trigger ONLY when button is clicked & when the option value is != 1

$(document).ready(function(){
    $("#submit").prop("disabled",true);
});

$("#brand_bu").change(function(){

    if($(this).val() != 1){
        $("#submit").prop("disabled",false);
        $("#hide").hide();
        $("#show").show();
    }
    else 
    {
        $("#submit").prop("disabled",true);
        $("#hide").hide();
        $("#show").hide();
    }
});

Answer 1

Try this:

$("#submit").on("click", function(){

    if($("#brand_bu").val() != 1){
        $("#submit").prop("disabled",false);
          $("#hide").hide();
    $("#show").show();
    }
    else {
     $("#submit").prop("disabled",true);
    $("#hide").hide();
    $("#show").hide();

    }

})

Answer 2

It's very simple, all you got to do is check the selected value in the select:

$(document).ready(function() {
    $('#submit').on('click', function() {
        if($('#brand_bu option:selected').val() != 1){
            //Not option 1.
            //Hide and Show happens here
        } else {
            //Option 1
            //Nothing should happen here
        }
    }
}

Trigger this event on to work on .click()

2 个答案: