How to add tooltip to a disabled select element using jquery

up vote
1
down vote

favorite

I have a disabled select element as follows for which I am not able to view the tooltip.

<div class="col-md-3">

        <select id="docpreset_colorformat" class="select2" name="docpreset_format_to" placeholder="Document format to"></select>

</div>

Jquery to disable:

$("#docpreset_colorformat").prop("disabled", true);

The jquery for adding the tooltip

$("#docpreset_colorformat").prop('title', 'Disabled for selected doc type: ' + format_to);

The tooltips works for other elements on the page such as of type 'input'.

Not sure what I'm missing here.

Any help would be appreciated such as a link to an old post or a hint.

edited Nov 7 at 16:34

D. Smania

2,6191321

asked Nov 7 at 15:01

Binoy Cherian

62111

Your selector is wrong. The select element hasn't id docpreset_colorformat
– Mohammad
Nov 7 at 15:06

What plugin you use are using for the select control and what framework, maybe Bootstrap?. Also, if you can make a snippet showing the issue, that will be very useful.
– D. Smania
Nov 7 at 15:15

@Mohammad, it was an example. I have many other select elements
– Binoy Cherian
Nov 7 at 15:45

If your selector be correct, the code work. jsfiddle.net/ugdva2qp
– Mohammad
Nov 7 at 15:47

@D.Smania,I'm not using a plugin. But bootstrap + Jquery and C# MVC
– Binoy Cherian
Nov 7 at 15:49

|
show 4 more comments

up vote
1
down vote

favorite

I have a disabled select element as follows for which I am not able to view the tooltip.

<div class="col-md-3">

        <select id="docpreset_colorformat" class="select2" name="docpreset_format_to" placeholder="Document format to"></select>

</div>

Jquery to disable:

$("#docpreset_colorformat").prop("disabled", true);

The jquery for adding the tooltip

$("#docpreset_colorformat").prop('title', 'Disabled for selected doc type: ' + format_to);

The tooltips works for other elements on the page such as of type 'input'.

Not sure what I'm missing here.

Any help would be appreciated such as a link to an old post or a hint.

edited Nov 7 at 16:34

D. Smania

2,6191321

asked Nov 7 at 15:01

Binoy Cherian

62111

Your selector is wrong. The select element hasn't id docpreset_colorformat
– Mohammad
Nov 7 at 15:06

What plugin you use are using for the select control and what framework, maybe Bootstrap?. Also, if you can make a snippet showing the issue, that will be very useful.
– D. Smania
Nov 7 at 15:15

@Mohammad, it was an example. I have many other select elements
– Binoy Cherian
Nov 7 at 15:45

If your selector be correct, the code work. jsfiddle.net/ugdva2qp
– Mohammad
Nov 7 at 15:47

@D.Smania,I'm not using a plugin. But bootstrap + Jquery and C# MVC
– Binoy Cherian
Nov 7 at 15:49

|
show 4 more comments

up vote
1
down vote

favorite

I have a disabled select element as follows for which I am not able to view the tooltip.

<div class="col-md-3">

        <select id="docpreset_colorformat" class="select2" name="docpreset_format_to" placeholder="Document format to"></select>

</div>

Jquery to disable:

$("#docpreset_colorformat").prop("disabled", true);

The jquery for adding the tooltip

$("#docpreset_colorformat").prop('title', 'Disabled for selected doc type: ' + format_to);

The tooltips works for other elements on the page such as of type 'input'.

Not sure what I'm missing here.

Any help would be appreciated such as a link to an old post or a hint.

edited Nov 7 at 16:34

D. Smania

2,6191321

asked Nov 7 at 15:01

Binoy Cherian

62111

I have a disabled select element as follows for which I am not able to view the tooltip.

<div class="col-md-3">

        <select id="docpreset_colorformat" class="select2" name="docpreset_format_to" placeholder="Document format to"></select>

</div>

Jquery to disable:

$("#docpreset_colorformat").prop("disabled", true);

The jquery for adding the tooltip

$("#docpreset_colorformat").prop('title', 'Disabled for selected doc type: ' + format_to);

The tooltips works for other elements on the page such as of type 'input'.

Not sure what I'm missing here.

Any help would be appreciated such as a link to an old post or a hint.

jquery twitter-bootstrap jquery-select2

edited Nov 7 at 16:34

D. Smania

2,6191321

asked Nov 7 at 15:01

Binoy Cherian

62111

edited Nov 7 at 16:34

D. Smania

2,6191321

asked Nov 7 at 15:01

Binoy Cherian

62111

edited Nov 7 at 16:34

D. Smania

2,6191321

edited Nov 7 at 16:34

D. Smania

2,6191321

edited Nov 7 at 16:34

D. Smania

2,6191321

asked Nov 7 at 15:01

Binoy Cherian

62111

asked Nov 7 at 15:01

Binoy Cherian

62111

asked Nov 7 at 15:01

Binoy Cherian

62111

Your selector is wrong. The select element hasn't id docpreset_colorformat
– Mohammad
Nov 7 at 15:06

What plugin you use are using for the select control and what framework, maybe Bootstrap?. Also, if you can make a snippet showing the issue, that will be very useful.
– D. Smania
Nov 7 at 15:15

@Mohammad, it was an example. I have many other select elements
– Binoy Cherian
Nov 7 at 15:45

If your selector be correct, the code work. jsfiddle.net/ugdva2qp
– Mohammad
Nov 7 at 15:47

@D.Smania,I'm not using a plugin. But bootstrap + Jquery and C# MVC
– Binoy Cherian
Nov 7 at 15:49

|
show 4 more comments

Your selector is wrong. The select element hasn't id docpreset_colorformat
– Mohammad
Nov 7 at 15:06

What plugin you use are using for the select control and what framework, maybe Bootstrap?. Also, if you can make a snippet showing the issue, that will be very useful.
– D. Smania
Nov 7 at 15:15

@Mohammad, it was an example. I have many other select elements
– Binoy Cherian
Nov 7 at 15:45

If your selector be correct, the code work. jsfiddle.net/ugdva2qp
– Mohammad
Nov 7 at 15:47

@D.Smania,I'm not using a plugin. But bootstrap + Jquery and C# MVC
– Binoy Cherian
Nov 7 at 15:49

Your selector is wrong. The select element hasn't id docpreset_colorformat
– Mohammad
Nov 7 at 15:06

What plugin you use are using for the select control and what framework, maybe Bootstrap?. Also, if you can make a snippet showing the issue, that will be very useful.
– D. Smania
Nov 7 at 15:15

@Mohammad, it was an example. I have many other select elements
– Binoy Cherian
Nov 7 at 15:45

If your selector be correct, the code work. jsfiddle.net/ugdva2qp
– Mohammad
Nov 7 at 15:47

@D.Smania,I'm not using a plugin. But bootstrap + Jquery and C# MVC
– Binoy Cherian
Nov 7 at 15:49

|
show 4 more comments

1 Answer
1

active

oldest

votes

up vote
1
down vote

accepted

I have done some research and the select2 plugin don't offer any option (actually) for disable the default title that is rendered for the current selected option. So this is my approach:

1) Disable the rendering of title with the selected value, using next workaround:

$('.select2-selection__rendered').removeAttr('title');

2) Add a wrapper container element to the selection control, and setup the title you want to render to this wrapper. In the example I'm showing, I use a <spam> element like the wrapper.

Check next example, the first selection control have implemented the workaround explained previously, while the other is standard:

$(document).ready(function()

{

    // Initialize select2 controls.



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

    

    // Workaround for disable title rendering on the select2 plugin.



    $('.select2-selection__rendered').removeAttr('title');



    // Customize the "#sel1" control.



    $("#sel1").prop("disabled", true);

    $("#sel1").parent().prop("title", "Custom title for select control");

});

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>



<div class="container-fluid">

<div class="row">



  <div class="col-6">

    <spam>

    <select id="sel1" class="select2 form-control" placeholder="Placeholder...">

      <option value="1">Option 1</option>

      <option value="2">Option 2</option>

      <option value="3">Option 3</option>

    </select>

    </spam>

  </div>



  <div class="col-6">

    <select id="sel2" class="select2 form-control" placeholder="Placeholder...">

      <option value="1">Option 1</option>

      <option value="2">Option 2</option>

      <option value="3">Option 3</option>

    </select>

  </div>

  

</div>

</div>

edited Nov 7 at 21:36

answered Nov 7 at 16:34

D. Smania

2,6191321

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53192083%2fhow-to-add-tooltip-to-a-disabled-select-element-using-jquery%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
1
down vote

accepted

I have done some research and the select2 plugin don't offer any option (actually) for disable the default title that is rendered for the current selected option. So this is my approach:

1) Disable the rendering of title with the selected value, using next workaround:

$('.select2-selection__rendered').removeAttr('title');

2) Add a wrapper container element to the selection control, and setup the title you want to render to this wrapper. In the example I'm showing, I use a <spam> element like the wrapper.

Check next example, the first selection control have implemented the workaround explained previously, while the other is standard:

$(document).ready(function()

{

    // Initialize select2 controls.



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

    

    // Workaround for disable title rendering on the select2 plugin.



    $('.select2-selection__rendered').removeAttr('title');



    // Customize the "#sel1" control.



    $("#sel1").prop("disabled", true);

    $("#sel1").parent().prop("title", "Custom title for select control");

});

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>



<div class="container-fluid">

<div class="row">



  <div class="col-6">

    <spam>

    <select id="sel1" class="select2 form-control" placeholder="Placeholder...">

      <option value="1">Option 1</option>

      <option value="2">Option 2</option>

      <option value="3">Option 3</option>

    </select>

    </spam>

  </div>



  <div class="col-6">

    <select id="sel2" class="select2 form-control" placeholder="Placeholder...">

      <option value="1">Option 1</option>

      <option value="2">Option 2</option>

      <option value="3">Option 3</option>

    </select>

  </div>

  

</div>

</div>

edited Nov 7 at 21:36

answered Nov 7 at 16:34

D. Smania

2,6191321

add a comment |

up vote
1
down vote

accepted

I have done some research and the select2 plugin don't offer any option (actually) for disable the default title that is rendered for the current selected option. So this is my approach:

1) Disable the rendering of title with the selected value, using next workaround:

$('.select2-selection__rendered').removeAttr('title');

2) Add a wrapper container element to the selection control, and setup the title you want to render to this wrapper. In the example I'm showing, I use a <spam> element like the wrapper.

Check next example, the first selection control have implemented the workaround explained previously, while the other is standard:

$(document).ready(function()

{

    // Initialize select2 controls.



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

    

    // Workaround for disable title rendering on the select2 plugin.



    $('.select2-selection__rendered').removeAttr('title');



    // Customize the "#sel1" control.



    $("#sel1").prop("disabled", true);

    $("#sel1").parent().prop("title", "Custom title for select control");

});

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>



<div class="container-fluid">

<div class="row">



  <div class="col-6">

    <spam>

    <select id="sel1" class="select2 form-control" placeholder="Placeholder...">

      <option value="1">Option 1</option>

      <option value="2">Option 2</option>

      <option value="3">Option 3</option>

    </select>

    </spam>

  </div>



  <div class="col-6">

    <select id="sel2" class="select2 form-control" placeholder="Placeholder...">

      <option value="1">Option 1</option>

      <option value="2">Option 2</option>

      <option value="3">Option 3</option>

    </select>

  </div>

  

</div>

</div>

edited Nov 7 at 21:36

answered Nov 7 at 16:34

D. Smania

2,6191321

add a comment |

up vote
1
down vote

accepted

I have done some research and the select2 plugin don't offer any option (actually) for disable the default title that is rendered for the current selected option. So this is my approach:

1) Disable the rendering of title with the selected value, using next workaround:

$('.select2-selection__rendered').removeAttr('title');

2) Add a wrapper container element to the selection control, and setup the title you want to render to this wrapper. In the example I'm showing, I use a <spam> element like the wrapper.

Check next example, the first selection control have implemented the workaround explained previously, while the other is standard:

$(document).ready(function()

{

    // Initialize select2 controls.



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

    

    // Workaround for disable title rendering on the select2 plugin.



    $('.select2-selection__rendered').removeAttr('title');



    // Customize the "#sel1" control.



    $("#sel1").prop("disabled", true);

    $("#sel1").parent().prop("title", "Custom title for select control");

});

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>



<div class="container-fluid">

<div class="row">



  <div class="col-6">

    <spam>

    <select id="sel1" class="select2 form-control" placeholder="Placeholder...">

      <option value="1">Option 1</option>

      <option value="2">Option 2</option>

      <option value="3">Option 3</option>

    </select>

    </spam>

  </div>



  <div class="col-6">

    <select id="sel2" class="select2 form-control" placeholder="Placeholder...">

      <option value="1">Option 1</option>

      <option value="2">Option 2</option>

      <option value="3">Option 3</option>

    </select>

  </div>

  

</div>

</div>

edited Nov 7 at 21:36

answered Nov 7 at 16:34

D. Smania

2,6191321

I have done some research and the select2 plugin don't offer any option (actually) for disable the default title that is rendered for the current selected option. So this is my approach:

1) Disable the rendering of title with the selected value, using next workaround:

$('.select2-selection__rendered').removeAttr('title');

2) Add a wrapper container element to the selection control, and setup the title you want to render to this wrapper. In the example I'm showing, I use a <spam> element like the wrapper.

Check next example, the first selection control have implemented the workaround explained previously, while the other is standard:

$(document).ready(function()

{

    // Initialize select2 controls.



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

    

    // Workaround for disable title rendering on the select2 plugin.



    $('.select2-selection__rendered').removeAttr('title');



    // Customize the "#sel1" control.



    $("#sel1").prop("disabled", true);

    $("#sel1").parent().prop("title", "Custom title for select control");

});

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>



<div class="container-fluid">

<div class="row">



  <div class="col-6">

    <spam>

    <select id="sel1" class="select2 form-control" placeholder="Placeholder...">

      <option value="1">Option 1</option>

      <option value="2">Option 2</option>

      <option value="3">Option 3</option>

    </select>

    </spam>

  </div>



  <div class="col-6">

    <select id="sel2" class="select2 form-control" placeholder="Placeholder...">

      <option value="1">Option 1</option>

      <option value="2">Option 2</option>

      <option value="3">Option 3</option>

    </select>

  </div>

  

</div>

</div>

$(document).ready(function()

{

    // Initialize select2 controls.



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

    

    // Workaround for disable title rendering on the select2 plugin.



    $('.select2-selection__rendered').removeAttr('title');



    // Customize the "#sel1" control.



    $("#sel1").prop("disabled", true);

    $("#sel1").parent().prop("title", "Custom title for select control");

});

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>



<div class="container-fluid">

<div class="row">



  <div class="col-6">

    <spam>

    <select id="sel1" class="select2 form-control" placeholder="Placeholder...">

      <option value="1">Option 1</option>

      <option value="2">Option 2</option>

      <option value="3">Option 3</option>

    </select>

    </spam>

  </div>



  <div class="col-6">

    <select id="sel2" class="select2 form-control" placeholder="Placeholder...">

      <option value="1">Option 1</option>

      <option value="2">Option 2</option>

      <option value="3">Option 3</option>

    </select>

  </div>

  

</div>

</div>

$(document).ready(function()

{

    // Initialize select2 controls.



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

    

    // Workaround for disable title rendering on the select2 plugin.



    $('.select2-selection__rendered').removeAttr('title');



    // Customize the "#sel1" control.



    $("#sel1").prop("disabled", true);

    $("#sel1").parent().prop("title", "Custom title for select control");

});

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>



<div class="container-fluid">

<div class="row">



  <div class="col-6">

    <spam>

    <select id="sel1" class="select2 form-control" placeholder="Placeholder...">

      <option value="1">Option 1</option>

      <option value="2">Option 2</option>

      <option value="3">Option 3</option>

    </select>

    </spam>

  </div>



  <div class="col-6">

    <select id="sel2" class="select2 form-control" placeholder="Placeholder...">

      <option value="1">Option 1</option>

      <option value="2">Option 2</option>

      <option value="3">Option 3</option>

    </select>

  </div>

  

</div>

</div>

edited Nov 7 at 21:36

answered Nov 7 at 16:34

D. Smania

2,6191321

edited Nov 7 at 21:36

answered Nov 7 at 16:34

D. Smania

2,6191321

answered Nov 7 at 16:34

D. Smania

2,6191321

answered Nov 7 at 16:34

D. Smania

2,6191321

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Wsrtjtyk