How to remove display none in the option field?

I have a problem to remove the display: none; in the option field when I’ve the button.

Below is my coding, first start I have added the display:none in the Only User:

 <div class="form-group">
 <label>Edit Katalaluan<span style="color:red;">&nbsp;*</span></label>
 <select class="form-control required" id="edit_password" name="edit_password">
 <option value="0">Super Admin</option>
 <option value="1" style="display:none;">Only User</option>                                 
 </select>
 </div>

Then I click the Edit button then the style="display:none;" will remove， below is edit button coding:

<a href="javascript:void(0);" onclick="viewFunc2('<?php echo $loc; ?>', '<?php echo $id; ?>')" class="btn btn-sm btn-primary" data-color-format="hex">Edit</a>

Below is my button javascript function:

function viewFunc2(act_file, filter_id) {
    var loading_gif = $('#loading_gif');
    var form_data = 'action=view&filter_id=' + filter_id;

    $.ajax({
        dataType: 'json',
        type: 'POST',
        url: '?f=' + act_file,
        data: form_data,
        beforeSend: function() {
            // show_overLay();
            loading_gif.show();
            remove_errorMsg();

            $("html, body").animate({scrollTop: 0}, "slow");
        },
        success: function(data) {
            loading_gif.hide();

            // alert(data.id);
            $.each(data, function(key, value) {
                $('#myForm #' + key).val('');

                $('#myForm #' + key).val(value);
                // $('#' + key + '_' + value).attr('selected','selected');
                // console.log(key + ': ' + value);
            });
            viewFuncDetail(act_file, filter_id);

            $('#user_name').prop('readonly', true);
            $('#filter_id').val(data.id);
            $('#btn_save').val('Update');
            $('#btn_cancel').val('Cancel');

        },
        error: function(data) {
            loading_gif.hide();
            alert(AJAX_ERR_MSG);
        }
    })
}

What I have tried:

document.getElementById(id).style.removeProperty( 'display' );

But it doesn’t work, it show me the result like below:

Hope someone can guide me on how to add the remove style=" display: none;" function in the javascript when I click the Edit button. Thanks.

Answer

You can Make a class like .hide{display:none;}

after making a class in your css you need to Write JQuery code like this

$('#edit_password option[value="1"]').addClass('hide');

And for show that option you can write

$('#edit_password option[value="1"]').removeClass('hide');

That’s How You can Manage it as per Your Requirement

Advertisement

Answer