添加“必填”以选择框

Question

I have a Country select box that display a State select box if the USA is selected. I am using the following jQuery to achieve this:

$(function() {
    $('#country').change(function(){
        $('.state').hide();
        $('#' + $(this).val()).show();
    }).trigger('change');
});

Is there a way that I can amend the above to also add the required attribute to the State select box if the USA is selected?

The State select box is within the following DIV

<div id="USA" class="state" style="display:none">

</div>

Many thanks,

John

Answer 1

Use the prop() method for that:

 $("#country").on("change", function() { let $state = $("#state"); if ($(this).val() == "EUA") { $state.prop("required", "required"); } else { $state.prop("required", null); } }).change(); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <select id="country"> <option>EUA</option> <option>Other</option> </select> <select id="state"> <option></option> <option>A</option> <option>B</option> </select> <button>Save</button> </form> 

• prop("required", "required") to add the property;
• prop("required", null) to remove it.

Answer 2

You may need to check for the selected value first, then you could use prop()/removeProp() :

$(function() {
    $('#country').change(function(){
        var selected_value = $(this).val();
        var state   = $(".state");
        var related_elem = $('#' + selected_value);

        if( selected_value === 'USA' ){
            state.prop('required', true).show();
            related_elem.show();
        }else{
            state.removeProp('required').hide();
            related_elem.hide();
        }
    }).trigger('change');
});