How to leave the first Option disabled and selected?

Asked

Viewed 4,600 times

0

How can I start a selectbox of type Select2 with the first option selected as disabled?

HTML:

<div class="form-group">
   <select name="tipoOperacao" id="tipoOperacao" class="selectTipo2" style="min-width : 100%">
     <option value="0" selected disabled>Selecionar...</option> 
   </select>
</div>

JAVASCRIPT:

$(".selectTipo2").select2();

What happens is that with the disabled property in the option, it does not appear to me selected:

inserir a descrição da imagem aqui

I’ve tried the following option and it doesn’t work either:

<option value="0" selected="selected" disabled="disabled">Selecionar...</option>

How do I mount a Select2 with the first option disabled?

javascript jquery html jquery-select2

1 answer

4


Select2 is not javascript but a plugin using Jquery.

Take a look at how you will have to put the scripts and Css below.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" type="text/css">
    <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/css/select2.min.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
        <div>

            <div class="form-group">
                <select name="tipoOperacao" id="tipoOperacao" class="selectTipo2" style="min-width: 100%">
                    <option value="0" selected disabled>Selecionar...</option>
                    <option value="1">Teste</option>
                </select>
            </div>
        </div>
    </form>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" type="text/javascript"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/js/select2.min.js"></script>
    <script type="text/javascript">
        $("#tipoOperacao").select2();
    </script>
</body>
</html>

Browser other questions tagged javascript jquery html jquery-select2

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