So what i need is an select all option in multiple bootstrap selector as an option so i just create a select as
<select class="form-control selectpicker" multiple>
<option value="all">All</option>
<option value="1">Dog</option>
<option value="2">Cat</option>
<option value="3">Tiger</option>
</select>
And when i click All it will remove all other options except all, and if i click any other than All then it need to remove all options
What i tried is like
$(".selectpicker").change(function(event){
if ($( this ).find("option:first").is(':selected')) {
$( this ).find("option").prop('selected', false);
$( this ).find("option:first").prop('selected', true);
} else {
$( this ).find("option:first").prop('selected', false);
}
});
But once All clicked then always all is activated and nothing can be clicked, i even tried to get value on onclick event but due to bootstrap selectpicker i can able to get it?
Any tricks to made this possible? i can do this with static variable for one selecpicker but can't able accomplish with multiple selectpicker in a form.
New edit
Here is a working DEMO
$('.selectpicker').selectpicker();
var all = $('option[value=all]');
$('.selectpicker').change(function() {
var all = $('option[value=all]');
var thisVal = all.html();
if (all.is(':selected')) {
$('.selectpicker').selectpicker('deselectAll');
$('ul.dropdown-menu > li[rel=0]').addClass('selected');
$('span.filter-option').html(thisVal);
} else {
$('ul.dropdown-menu > li[rel=0]').removeClass('selected');
}
});
I think you can do something like
$("#multiple-select option").prop("selected", "selected");
$('#multiple-select').selectpicker('refresh');
Must use prop.
I have a dropdown; I need to get the value of selected item; but it keeps saying undefined;
Here is the Jsfiddle
Am I doing something wrong?
<select class="ddl_status" id="status_ddl_20" style="display: none">
<option value="Active">Active</option>
<option value="InActive">InActive</option>
</select>
$(document).on('change', '.ddl_status', function() {
var parent= this.parent();
alert((parent option:selected).val());
});
Use this.value
$(document).on('change', '.ddl_status', function() {
alert(this.value);
});
There is no need to get the parent element and find the selected option again - the selected options value becomes the select value.
I updated your fiddle
$(document).on('change', '.ddl_status', function() {
alert($(this).val());
});
I'm guessing your fiddle was supposed to have something other than display:none?
Also, just use $(this).val(); (Hint: $ is jQuery)
How do i disable selected options in many drop-down list boxes but leave one of them enabled?
The box that i need to have the options enabled has the following html code and has and id of (x_captain). Other options in the boxes are disabled dynamically. List box whose all options must be re-enabled for selection.
HTML:
<select class="x_captain" id="x_captain" name="x_captain">
<option value="1" disabled="disabled">W.SZCZESNY, GK</option>
<option value="13" disabled="disabled">E.VIVIANO, GK</option>
</select>
i have the following Code that disables all the duplicates in all select boxes.
jQuery:
<script>
$('select').click(function() {
var selections = [];
$('select option:selected').each(function(){
if($(this).val())
selections.push($(this).val());
})
$('select option').each(function() {
$(this).attr('disabled', $.inArray($(this).val(),selections)>-1 && !$(this).is(":selected"));
});
});
</script>
Thank you
$('select:not(#x_captain) option').each(function() {
$(this).attr('disabled', $.inArray($(this).val(),selections)>-1 && !$(this).is(":selected"));
});
<script>
$('#x_captain').click(function() {
$('#x_captain option').each(function(){
if($(this).attr('selected') == selected)
{
$(this).attr("disabled",false);
}
else
{
$(this).attr("disabled",true);
}
});
});
</script>
I have the following jQuery code for showing/hiding a conditional form field (contained within tr#other-employer). This works fine, once the page is loaded and options are changed.
I would like make it so that the conditinal field shows when the page is loaded and the option selected in the drop-down list with #employer is pre-selected (this is done with PHP).
I have tried removing $('tr#other-employer').hide(); , but then this showed the conditional field on load regardless if the drop-down field is other or not.
A simple sample page is here: http://brenda.upreach.org.uk/beta/form.php
$(document).ready(function () {
$('tr#other-employer').hide();
$('#employer').change(function () {
if ($(this).val() == "Other") {
$('tr#other-employer').fadeIn();
} else {
$('tr#other-employer').hide();
}
});
});
Any help greatly appreciated!
You can add an if condition like below to check the status of the select box and do the needful.
$(document).ready(function () {
$('tr#other-employer').hide();
/*********************************/
if($("select#employer").val() == "Other")
{ $('tr#other-employer').fadeIn(); }
/*********************************/
$('#employer').change(function () {
if ($(this).val() == "Other") {
$('tr#other-employer').fadeIn();
} else {
$('tr#other-employer').hide();
}
});
});
you can also set the select box default option from jquery using
$("select#employer").val("Other");
I'm not sure I totally understand the question, but if you're looking for the same functionality this code provides, but without the action being a requirement, then just remove the .change() function, and swap out the this for the id:
$(document).ready(function () {
$('tr#other-employer').hide();
if ($('#employer').val() == "Other") {
$('#other-employer').fadeIn();
}
});
Edit:
The above should work, given the following HTML (I've removed the table code from both to simplify the explanation):
<form>
<select id="#employer">
<option value="Foo">Foo</option>
<option value="Other" selected="selected">Other</option>
</select>
<select id="#other-employer">
<option value="Foo">Bar</option>
</select>
</form>
Given the above code the #other-employer dropdown will display only if the 'Other' option is preselected on load.
I want to prevent a select box from being changed if a certain condition applies. Doing this doesn't seem to work:
$('#my_select').bind('change', function(ev) {
if(my_condition)
{
ev.preventDefault();
return false;
}
});
I'm guessing this is because by this point the selected option has already changed.
What are other ways of doing this?
Try this:
http://jsfiddle.net/qk2Pc/
var my_condition = true;
var lastSel = $("#my_select option:selected");
$("#my_select").change(function(){
if(my_condition)
{
lastSel.prop("selected", true);
}
});
$("#my_select").click(function(){
lastSel = $("#my_select option:selected");
});
In the event someone needs a generic version of mattsven's answer (as I did), here it is:
$('select').each(function() {
$(this).data('lastSelected', $(this).find('option:selected'));
});
$('select').change(function() {
if(my_condition) {
$(this).data('lastSelected').attr('selected', true);
}
});
$('select').click(function() {
$(this).data('lastSelected', $(this).find('option:selected'));
});
If you simply want to prevent interaction with the select altogether when my_condition is true, you could always just capture the mousedown event and do your event prevent there:
var my_condition = true;
$("#my_select").mousedown(function(e){
if(my_condition)
{
e.preventDefault();
alert("Because my_condition is true, you cannot make this change.");
}
});
This will prevent any change event from ever occurring while my_condition is true.
Another option to consider is disabling it when you do not want it to be able to be changed and enabling it:
//When select should be disabled:
{
$('#my_select').attr('disabled', 'disabled');
}
//When select should not be disabled
{
$('#my_select').removeAttr('disabled');
}
Update since your comment (if I understand the functionality you want):
$("#dropdown").change(function()
{
var answer = confirm("Are you sure you want to change your selection?")
{
if(answer)
{
//Update dropdown (Perform update logic)
}
else
{
//Allow Change (Do nothing - allow change)
}
}
});
Demo
None of the answers worked well for me. The easy solution in my case was:
$("#selectToNotAllow").focus(function(e) {
$("#someOtherTextfield").focus();
});
This accomplishes clicking or tabbing to the select drop down and simply moves the focus to a different field (a nearby text input that was set to readonly) when attempting to focus on the select. May sound like silly trickery, but very effective.
You can do this without jquery...
<select onchange="event.target.selectedIndex = 0">
...
</select>
or you can do a function to check your condition
<select onchange="check(event)">
...
</select>
<script>
function check(e){
if (my_condition){
event.target.selectedIndex = 0;
}
}
</script>
I was looking for "javascript prevent select change" on Google and this question comes at first result. At the end my solution was:
const $select = document.querySelector("#your_select_id");
let lastSelectedIndex = $select.selectedIndex;
// We save the last selected index on click
$select.addEventListener("click", function () {
lastSelectedIndex = $select.selectedIndex;
});
// And then, in the change, we select it if the user does not confirm
$select.addEventListener("change", function (e) {
if (!confirm("Some question or action")) {
$select.selectedIndex = lastSelectedIndex;
return;
}
// Here do whatever you want; the user has clicked "Yes" on the confirm
// ...
});
I hope it helps to someone who is looking for this and does not have jQuery :)
You might need to use the ".live" option in jQuery since the behavior will be evaluated in real-time based on the condition you've set.
$('#my_select').live('change', function(ev) {
if(my_condition)
{
ev.preventDefault();
return false;
}
});
Implement custom readonly like eventHandler
<select id='country' data-changeable=false>
<option selected value="INDIA">India</option>
<option value="USA">United States</option>
<option value="UK">United Kingdom</option>
</select>
<script>
var lastSelected = $("#country option:selected");
$("#country").on("change", function() {
if(!$(this).data(changeable)) {
lastSelected.attr("selected", true);
}
});
$("#country").on("click", function() {
lastSelected = $("#country option:selected");
});
</script>
Demo : https://jsfiddle.net/0mvajuay/8/
This was the ONLY thing that worked for me (on Chrome Version 54.0.2840.27):
$('select').each(function() {
$(this).data('lastSelectedIndex', this.selectedIndex);
});
$('select').click(function() {
$(this).data('lastSelectedIndex', this.selectedIndex);
});
$('select[class*="select-with-confirm"]').change(function() {
if (!confirm("Do you really want to change?")) {
this.selectedIndex = $(this).data('lastSelectedIndex');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='fruits' class="select-with-confirm">
<option selected value="apples">Apples</option>
<option value="bananas">Bananas</option>
<option value="melons">Melons</option>
</select>
<select id='people'>
<option selected value="john">John</option>
<option value="jack">Jack</option>
<option value="jane">Jane</option>
</select>
This worked for me, no need to keep a lastSelected if you know the optionIndex to select.
var optionIndex = ...
$(this)[0].options[optionIndex].selected = true;
$('#my_select').bind('mousedown', function (event) {
event.preventDefault();
event.stopImmediatePropagation();
});
if anybody still interested, this solved the problem, using jQuery 3.3.1
jQuery('.class').each(function(i,v){
jQuery(v).data('lastSelected', jQuery(v).find('option:selected').val());
jQuery(v).on('change', function(){
if(!confirm('Are you sure?'))
{
var self = jQuery(this);
jQuery(this).find('option').each(function(key, value){
if(parseInt(jQuery(value).val()) === parseInt(self.data('lastSelected')))
{
jQuery(this).prop('selected', 'selected');
}
});
}
jQuery(v).data('lastSelected', jQuery(v).find('option:selected').val());
});
});
None of the other answers worked for me, here is what eventually did.
I had to track the previous selected value of the select element and store it in the data-* attribute. Then I had to use the val() method for the select box that JQuery provides. Also, I had to make sure I was using the value attribute in my options when I populated the select box.
<body>
<select id="sel">
<option value="Apple">Apple</option> <!-- Must use the value attribute on the options in order for this to work. -->
<option value="Bannana">Bannana</option>
<option value="Cherry">Cherry</option>
</select>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.js" type="text/javascript" language="javascript"></script>
<script>
$(document).ready()
{
//
// Register the necessary events.
$("#sel").on("click", sel_TrackLastChange);
$("#sel").on("keydown", sel_TrackLastChange);
$("#sel").on("change", sel_Change);
$("#sel").data("lastSelected", $("#sel").val());
}
//
// Track the previously selected value when the user either clicks on or uses the keyboard to change
// the option in the select box. Store it in the select box's data-* attribute.
function sel_TrackLastChange()
{
$("#sel").data("lastSelected", $("#sel").val());
}
//
// When the option changes on the select box, ask the user if they want to change it.
function sel_Change()
{
if(!confirm("Are you sure?"))
{
//
// If the user does not want to change the selection then use JQuery's .val() method to change
// the selection back to what it was previously.
$("#sel").val($("#sel").data("lastSelected"));
}
}
</script>
I hope this can help someone else who has the same problem as I did.