How to leave the first option disabled and selected?

0

How can I start a selectbox of type select2 with the first option selected 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 selected to me:

Ihavetriedthefollowingoptionanditalsodoesnotwork:

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

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

    
asked by anonymous 23.04.2015 / 13:02

1 answer

4

The select2 is not javascript but a plugin that uses Jquery.

Take a look at how you'll 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>
    
23.04.2015 / 15:04