Develop Reference

Bootstrap 4 Select2 jQuery Not working in Ajax Calls

I am using Bootstrap 4 and Select2 jQuery plugin in my webpage. It is working perfectly in my website. But when calling an another page contenting Select2 class of select input is not working.
Plugin Initiated at main page as -
<script type="text/javascript" language="javascript">
$(function () {
//Initialize Select2 Elements
$('.select2').select2()
$('.select2-selection').css('border','0px')
$('.select2-container').children().css('border','0px')
//Initialize Select2 Elements
$('.select2bs4').select2({
theme: 'bootstrap4'
})
})
</script>
My Ajax page contain below input elements -
<select class="select2" style="width: 100%;" id="emp" name="emp">
<option value="">-- Select employee --</option>
<option value="E001">Employee 1</option>
<option value="E002">Employee 2</option>
</select>
I am unable to figure out the issue why it not working on Ajax Called page. Anybody please give answer? Thanks in advance.

In my opinion, you can call the select2 plugin function again after ajax called, I think.
Try it, maybe the mistake fixed.
Hope it helps. thanks

JQuery set select using .prop('selectedIndex', #) not working

I'm using the following line to set a option from a select menu:
$('select').prop('selectedIndex', 2)
Using the following site as a example:
http://shoebaloo.nl/michael-by-michael-kors-chelsea-skate-leo-bruin-dessin-285000097-women-sneakers.html
I am indeed seeing the select option going to the second option but it wont have the same effect as actually clicking on the second option.
Can someone help me so the page actually recognises me "clicking" on a option?

You need to select the option with a selector.
$('select option:eq(2)').prop('selected', true)
If you're looking to manually trigger a click or change event, you could use the .trigger('click') or .trigger('change') methods.
http://jsfiddle.net/j5v6tp7t/4/

All you should have to do is use .val() to set the value.
For example:
$('select').val('2')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select>
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
<option value="4">d</option>
</select>

Your expression was right but the correct syntax is :
$('select').get(0).selectedIndex = 2;
http://jsfiddle.net/f4s762cq/

How to alert the selected option using javascript or jquery?

I am using a select tag in my code, here is my code,
<select onchange="test(this);">
<option value="0">Select</option>
<option value="1">Select1</option>
<option value="2">Select2</option>
<option value="3">Select3</option>
</select>
and javascript code is here,
<script>
function test(obj)
{
alert($(obj).val());
}
</script>
I want to alert the selected text here, If I use the above code the value of the selected option is coming, but I want to alert the text of the selected option can anyone tell to achive this one.
I want to alert it without using any class or id.
I want to alert it only through the obj.
I am waiting for your help.
Thanks In advance

This should do the trick...
alert($(obj).find("option:selected").text());
That uses the jQuery object $(obj), like you already had, but does a find() which searches the child elements, in this case the selected option.
jQuery find()
:selected pseudo-selector

Try this..
alert($(obj).find("option:selected").text());

you can try this:
alert($(obj).find('option').eq(obj.value).text());
Working jsFiddle

<select id="someid" onchange="test();">
<option value="0">Select</option>
<option value="1">Select1</option>
<option value="2">Select2</option>
<option value="3">Select3</option>
</select>
javascript>
function test(){
var elem = document.getElementById("someid"),
var selectedNode = elem.options[elem.selectedIndex].text;
alert(selectedNode );
}
jQuery>
$("#someid").change(){
alert($(this).find("option:selected").text());
}

jQuery UI MultiSelect are selecting all <select> in the page

I'm using the plugin jQuery UI MultiSelect http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/.
But I want just one <select> determinated by me to be multiple!
I alrealy have others <select> on my page (simple selects), like this:
<select name='simple_select' id='simples_select'>
<option value='1'>Option 1</option>
</select>
And, for the multiple <select>:
<select multiple="multiple" name='multiple_select' id='multiple_select'>
<option value='1'>Option 1</option>
</select>
When I change this function from "select" to something else, (like "div") all the divs stay "multiple". So, like this function (downloaded from the plugin site), all the <select> will be multiple... and I just one specific.
<script type="text/javascript">
$(function(){
$("select").multiselect();
});
</script>
Anyone have any idea how can I make it? Thanks for reading and I'm sorry about the terrifying english (I'm brazilian). ^^

Try using :not() to exclude a select you don't want calling it's ID inside :not()
$(function(){
$("select:not(#simples_select)").multiselect();
});
Demo
Or just use the ID selector for the one that you want, since it has ID:
$(function(){
$("#multiple_select").multiselect();
});
Demo

Unless you specifically want to apply something across a group of tags or objects it's much better practice to use IDs. To apply the code to the specific ID use the # symbol with the ID.
You can learn about CSS selectors with jQuery here: http://api.jquery.com/category/selectors/
<script type="text/javascript">
$(function(){
$("#multiple_select").multiselect();
});
</script>

If you want to select all <select> use $('select') and if you only want to select a specific <select> use $('#mySelect').
See this link for more info

Change text inside dynamic div when on select change is made jquery

I have a title for my drop down that is dynamically given and I can currently change it when the page loads. But once I select an item from the drop down it changes back. I am looking for a simple jquery js solution that can help keep the name when an item is selected.
I need to change the text in: #shippingStateSpan from Destination State -> Destination Province and leave that way even after something is selected.
Here is my html:
<div class="shippingStateDiv">
<span id="shippingStateSpan">Destination State<br />
</span>
<select name="shippingState" id="shippingState" class="shippingDropDown"
onchange="ApplyTaxRate(this.value,4040828,1,1,0);">
<option value="-1" selected="selected">Please Select</option>
<option value="129654">AB</option>
<option value="129653">BC</option>
<option value="129652">MB</option>
<option value="129647">NB</option>
</select>
</div>
Here is my js I use to make the change on initially (But it changes back after I select something) I assume a jquery .on function may be possible but I an not sure how to do it. Thanks for the help.
<script type="text/javascript">
$("#shippingStateSpan").text("Destination Province");
</script>

Try this:
$(document).ready(function(){
var $select = $('#shippingState'),
$span = $('#shippingStateSpan');
$select.on('change', function(){
$span.html('Destination Province');
});
});

Try this
​$(function() {
$('#shippingState').on('change', function() {
$('#shippingStateSpan').text('Destination Province')
});
});​
Check out the working example here http://jsfiddle.net/sushanth009/zp7bA/