Change text for `option` in a `select` with jquery - javascript

So, i´m trying to change a text for an option with jquery.
HTML
<select id="mySelect">
<option value="change me">Change me</option>
</select>
JS
$(document).ready(function() {
$('#mySelect').select2();
$(document).find('option[value="change me"]').text('Changed');
})
Well, nothing happends.
It´s important to change the text "live".
Fiddle: https://jsfiddle.net/gmt22ffL/2/
Is this even possible?
I´m using Jquery plugin "Select2" for my select.

It works perfectly fine. But let's try adding Select2 and see:
$(document).ready(function() {
$('option[value="change me"]').text('Changed');
$('#mySelect').select2();
});
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.full.min.js"></script>
<select id="mySelect">
<option value="change me">Change me</option>
</select>
Swapping the lines work.
Destroying and changing:
$(document).ready(function() {
$('#mySelect').select2();
$('#mySelect').select2("destroy");
$('option[value="change me"]').text('Changed');
$('#mySelect').select2();
});
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.full.min.js"></script>
<select id="mySelect">
<option value="change me">Change me</option>
</select>

Related

How can i create this FORM functionality using HTML, CSS & JavaScript

I want to create a form similar to the image below. Please someone help me with this
Please try the following code:
I'm using cdn for jquery multiselect in the below example. You can find the latest cdn here: https://cdnjs.com/libraries/multi-select
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/multi-select/0.9.12/css/multi-select.css" integrity="sha512-2sFkW9HTkUJVIu0jTS8AUEsTk8gFAFrPmtAxyzIhbeXHRH8NXhBFnLAMLQpuhHF/dL5+sYoNHWYYX2Hlk+BVHQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<select multiple="multiple" id="my-select" name="my-select[]">
<option value='elem_1'>elem 1</option>
<option value='elem_2'>elem 2</option>
<option value='elem_3'>elem 3</option>
<option value='elem_4'>elem 4</option>
<option value='elem_100'>elem 100</option>
</select>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/multi-select/0.9.12/js/jquery.multi-select.js" integrity="sha512-X1iMoI6a2IoZFOheUVf3ZmcD1L7zN/eVtig6enIq8yBlwDcbPVao/LG8+/SdjcVn72zF+A/viRLPSxfXLu/rbQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
$('#my-select').multiSelect();
</script>
</body>
</html>

How to focus bootstrap select picker

I've use data-live-search for searchable option. When I click on focus button it should focus again select. I've use following code
$("#focus").click(function() {
$(".selectpicker").focus();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script>
<select data-live-search="true" data-live-search-style="startsWith" class="selectpicker">
<option value="4444">4444</option>
<option value="Fedex">Fedex</option>
<option value="Elite">Elite</option>
<option value="Interp">Interp</option>
<option value="Test">Test</option>
</select>
<button id="focus">focus</button>
Whenever I press enter t is focus to select box but search option is not shown. I've attach screenshot
Please give me suggestion for display proper option with search option when I enter it
focus() not working because it turned to customized select not native select option, by the way there is a native way to do this in selectpicker plugin, an event called toggle
$("#focus").click(function() {
// toggle
$('.selectpicker').selectpicker('toggle');
// select by value
$('.selectpicker').selectpicker('val', 'Test');
$('.remove-example').selectpicker('refresh');
// change highlight
$('.dropdown-menu li').removeClass('active')
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script>
<select data-live-search="true" data-live-search-style="startsWith" class="selectpicker">
<option value="4444">4444</option>
<option value="Fedex">Fedex</option>
<option value="Elite">Elite</option>
<option value="Interp">Interp</option>
<option value="Test">Test</option>
</select>
<button id="focus">focus</button>

Chosen.js Multiple select option

Is there a way to set up chosen on a multiple select box so that when items are selected just the option values are shown instead of the option name by default.
<select multiple>
<option value="A">America</option>
<option value="B">Barbados</option>
<option value="C">Canada</option>
</select>
So whenselected, the input box shows "A", "B" and or "C"
Thanks in advance
Make sure you are using the correct .js and .css files.
This works for me:
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.1/chosen.css">
</head>
<body>
<select multiple style="width: 500px;">
<option value="A">America</option>
<option value="B">Barbados</option>
<option value="C">Canada</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.1/chosen.jquery.min.js"></script>
<script>
$(document).ready(function() {
$('select').chosen();
});
</script>
</body>
In this example are used the external resources from cdnjs.cloudflare.com:
3.1.0/jquery.min.js
1.6.1/chosen.css
1.6.1/chosen.jquery.min.js

How do I make the select2 search box "inline"?

I am migrating from Twitter's typeahead.js to select2.
One thing I really like about typeahead.js is how the selected value and the search box appear in the same field. You can try it out here.
I would like to achieve the same in select2. You'll notice that in select2 the "currently selected value" is a different place than the search box.
How do I make it so that it is the same element?
At least now is always inline...
$(document).ready(function() {
$('select').select2();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
Inline:
<select>
<option value="Pizza">Pizza</option>
<option value="Burger">Burger</option>
<option value="Sugar">Sugar</option>
</select>
indeed!
But! If you use bootstrap you have to make the form inline. Just add the class form-inline to the form. I had to do that to get it inline...
You Have Used Multiple Html Attributes Used:
For Example:
Using For bootstrap Css and Bootstrap Script
Using For Bootstrap Select Css And Script
Using For Latest query Version
write your Drop down Code
<select class="selectpicker" data-live-search="true" multiple>
<option data-tokens="ketchup mustard">Hot</option>
<option data-tokens="mustard">Burger</option>
<option data-tokens="frosting">Sugar</option>
</select>
For example:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
<select class="selectpicker" multiple>
<option data-tokens="Pizza">Pizza</option>
<option data-tokens="Burger">Burger</option>
<option data-tokens="Sugar">Sugar</option>
</select>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
<select class="selectpicker" data-live-search="true" multiple>
<option data-tokens="ketchup mustard">Hot</option>
<option data-tokens="mustard">Burger</option>
<option data-tokens="frosting">Sugar</option>
</select>
Try Code:

If a Select All option is Checked then display a div using bootstrap multiselect

After Selecting "Select All" option in the drop down list,I'll click on a generate graph button.Then I want to display a chart containing of all options in the drop down list in a particular div using bootstrap multi-select.
My code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Multi Select Dropdown with Checkboxes</title>
<link rel="stylesheet" href="css/bootstrap-3.1.1.min.css" type="text/css" />
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/bootstrap-2.3.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<body>
<div id="PiDiv"></div>
<div id="AllDiv"></div>
<form id="form1">
<div style="padding:20px">
<label>Select Country</label>
<select id="selectId" multiple="multiple">
<option value="India">India</option>
<option value="Japan">Japan</option>
<option value="Germany">Germany</option>
<option value="Nepal">Nepal</option>
<option value="Iraq">Iraq</option>
<option value="China">China</option>
</select><br /><br />
<input type="button" id="btnget" value="Get Selected Values" />
<script type="text/javascript">
$(function() {
$('#selectId').multiselect({
includeSelectAllOption: true
});
$('#btnget').click(function() {
alert($('#selectId').val());
if($('#selectId').val() == "India"){
$("#PiDiv").load("/home/divya/html_docs/pi.html");
}
})
});
</script>
</div>
</form>
</body>
</html>
I'm able to select one option and display its corresponding chart.But for select all option,I'm not getting how to display a div after clicking on a generate graph button.Can anyone please suggest me on this issue ...
try this option. Change the html to below and replace your URL in data-url
<select id="selectId" multiple="multiple">
<option value="India" data-url="<!-- URL -->">India</option>
<option value="Japan" data-url="<!-- URL -->">Japan</option>
<option value="Germany" data-url="<!-- URL -->">Germany</option>
<option value="Nepal" data-url="<!-- URL -->">Nepal</option>
<option value="Iraq" data-url="<!-- URL -->">Iraq</option>
<option value="China" data-url="<!-- URL -->">China</option>
</select>
jQuery Code
$('#btnget').click(function() {
$("#PiDiv").empty();
$('#selectId option:selected').each(function(index,elem){
if(typeof $(elem).data('url') != "undefined"){
$.get( $(elem).data('url'), function( data ) {
$("#PiDiv").append(data);
});
}
});
})

Categories