如果我的html文件中有多个select2，如何更改特定select2的宽度？

Question

I am having more than 1 select2 in my HTML file. I want to set a width to a specific select2 and a common width to all the other select2. The common width is affecting the width of all the select and even though if I am trying to override the width through jquery it is not happening.

CSS

.select2-container {
    width: 100% !important;
}

HTML

<div class="col-md-12">
    <select class="select2 form-control m-t-15"  id="user_name">
        <option selected="selected">Select Name</option>
    </select>
    <select class="select2 form-control m-t-15"  id="user_roll">
        <option selected="selected">Select Roll</option>
    </select>
    <select class="select2 form-control m-t-15"  id="user_address">
        <option selected="selected">Select Address</option>
    </select>
</div>

JQUERY

    $(".select2").select2();
    $("#user_address").select2({ width: '50%' });

Expected Result:- select 2 of id "user_address" should be having width 50%.

Current Result:- All the select 2 is having width 100%

Anybody any idea how to set 50% width to select2 of id "user_address"?

Answer 1

You already have id's for each select2 therefore u can style that specific select2 with its id for ex let's style 'user_roll':

#user_roll{
//your styling here, noting that "#" is for the id just like the "." is for class
  }

Answer 2

Instead of setting option as selected use placeholder in select2

 $(".select2").select2({ width: '100%',placeholder:'Choose an Option', allowClear: true }); $("#user_address").select2({ width: '60%' ,placeholder:'Choose an Address', allowClear: true }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet"/> <div class="col-md-12"> <select class="select2 form-control mt-15" id="user_name"> </select> <select class="select2 form-control mt-15" id="user_roll"> </select> <select class="select2 form-control mt-15" id="user_address"> </select> </div> 

Answer 3

just changes in css above your css code please remove it and replace with below code :

.select2 {
 width: 100%;
}

Answer 4

Try this:

#user_address{
  width: 50%;
}

Answer 5

try this

 .select-roll-width{ width:50%; } 

 <div class="col-md-12"> <select class="select2 form-control mt-15" id="user_name"> <option selected="selected">Select Name</option> </select> <select class="select2 select-roll-width form-control mt-15" id="user_roll"> <option selected="selected">Select Roll</option> </select> <select class="select2 form-control mt-15" id="user_address"> <option selected="selected">Select Address</option> </select> </div>