On Page I have 3 multiple-select-boxes. Only for 3rd one I have additional logic (custom onchange event).
So first 2 I just initialize with line of code :
$('.multiselect').multiselect();
But when I've tried to add custom logic for 3rd select - it doesn't work.
$('#RegionIds').multiselect({
onChange: function(option, checked) {
alert('changed value' + $(option).val());
}
});
Alert never appears in this case.
Update : JsBIN Example : https://jsbin.com/voquhegode/edit?html,js,output
Update 2 :
Thanks for replies. But I've found another issue with multiple selects.
https://jsfiddle.net/x6z6w0n8/7/ In case I want to set selected values on initialize step, I saw one additional select. This causes line of code where I manualy set selected values
$(select).multiselect('select', jsonArr[i].Item1);
You should use $('.multiselect').multiselect(); in the end like here fiddle Because you cover other elements with custom logic which has the same class .multiselect
$('#example-onInitialized').multiselect({
onChange: function(option, checked, select) {
var changedVal = $(option).val();
if (changedVal < 3) {
if (checked == true) {
console.log('less');
} else if (checked == false) {
console.log('more');
}
}
}
});
$('#RegionIds').multiselect({
onChange: function(option, checked) {
console.log('changed');
}
});
$('.multiple').multiselect();
Or if every select has custom logic call multiselect() for concret IDs.
Related
I have the following question, when I change the value of the combobox, the checkboxes are still marked, with prop the values are unmarked, but this time it does not work, the idea is to reset the marked checkboxes when the value of the checkbox is changed.
Regards.
var cambio = $("#cmbKit").on('change', function () {
var checkPoint = !$(this).data('checked');
$('#tblCajas input[type="checkbox"]').each(function () {
if (checkPoint == true) {
$(':checkbox').prop('checked', false);
$("input[type='checkbox']").prop('checked', false);
}
});
});
if (cambio) {
selectedBox = 0;
$('#divCalculos').hide();
$('#btnPlanificar').hide();
}
As you want to reset every checkbox on change event of combobox, you can use below code -
$("#cmbKit").change(function() {
$("input[type='checkbox']").prop('checked', false);
});
You shouldn't use any if condition as you are going to reset it after every change event.
Please note that given code will reset all checkboxes on page, add table selector as well in case you have multiple table with different content.
Hope this helps.
I use autosuggestion plugin.
First I have code:
$('.auto').autocomplete({
lookup: data,
onSelect: function (suggestion) {
console.log(koji);
$('#cena_'+koji).val(suggestion.cena);
console.log(suggestion.ID);
$('#jmere'+koji).val(suggestion.jmere);
$('#kol'+koji).val(suggestion.kol);
$('#popust'+koji).val(suggestion.popust);
$('#pdv'+koji).val(suggestion.porez);
etc...
and this is OK, so when I pick some Item from list I update other input fields.
But after that I just choose other value for #cena or #jmere but if I click again on input field with class .auto (that is picked before), then onSelect is again fired and values I choose manualy #cena or #jmere been changed to suggested values.
Please help me to solve this problem. So how I can prevent call onSelect when there is already picked Item...
The JS code of onSelect is:
onSelect: function (index) {
var that = this,
onSelectCallback = that.options.onSelect,
suggestion = that.suggestions[index];
that.currentValue = that.getValue(suggestion.value);
if (that.currentValue !== that.el.val() && !that.options.preserveInput) {
that.el.val(that.currentValue);
}
that.signalHint(null);
that.suggestions = [];
that.selection = suggestion;
if ($.isFunction(onSelectCallback)) {
onSelectCallback.call(that.element, suggestion);
}
},
So is there any way to change onSelect option - to prevent calling when there is already picked some item?
You can disable the autocomplete by using disable:
$('SELECTOR').autocomplete('disable');
And you can change it back like:
$('SELECTOR').autocomplete('enable');
jsfiddle DEMO
If you want to completely remove the autocomplete you can use despose ad OP said:
$('SELECTOR').autocomplete('dispose');
I am currently working on a bit of javascript that will execute when a checkbox is checked.
When the checkbox is checked, the form will display 2 more select boxes.
I've attempted something but i'm not very good with javascript, can someone take a look and lemme know where i'm going wrong?
$(document).ready(function() {
$("#repeat").change(function () {
if ($("#repeat").checked){
$("#numbers").slideDown();
} else{
$("#numbers").slideUp();
}
});
$("#numbers").hide();
$("#repeat").tigger("change");
});
And the id of the checkbox is repeat and id of one of the select boxes is numbers.
This part is not correct:
$("#repeat").checked
and should be
this.checked
So whole script:
$(document).ready(function () {
$("#repeat").change(function () {
if (this.checked) {
$("#numbers").slideDown();
} else {
$("#numbers").slideUp();
}
});
$("#numbers").hide();
$("#repeat").trigger("change"); // <--- trigger, not tigger
});
$("#repeat") is a jQuery instance object, it doesn't have a property checked. However this inside of change event handler refers to the HTMLSelectElement which has this property.
Also it's trigger not tigger.
I'm trying to do something like this answer: https://stackoverflow.com/a/6256910/1641189
However I want to do it with multi-select fields since they provide scroll bars.
Instead of having each item move as soon as it's clicked, like the answer link above, I am going to have two buttons between the two select fields.
Something like this: http://www.kj4ohh.com/stuff/selectfields.png
How would I do this in javascript/jquery?
How would I return the contents of both select fields back to my flask application?
EDIT:
I had tried the following javascript:
function assign(form)
{
for(i=0;i<form.unassigned.length;i++) {
if (form.unassigned.options[i].selected == true) {
form.assigned.add(form.unassigned.options[i]);
form.unassigned.remove(i);
}
}
//unselect all items
form.assigned.selectedIndex = -1
}
function unassign(form)
{
for(i=0;i<form.assigned.length;i++) {
if (form.assigned.options[i].selected == true) {
form.unassigned.add(form.assigned.options[i]);
form.assigned.remove(i);
}
}
//unselect all items
form.unassigned.selectedIndex = -1
}
but with strange results:
With this script, if you select an item from either select field and hit the appropriate assign/unassign button it works corectly.
If you select two items, only one is moved.
If you select more than two, one is moved, one stays put and the rest vanish.
However if I add an alert() line outputting the current selection being observed, it will produce an alert box for each item selected correctly.
You have to use jquery plugin for better result
http://loudev.com/
You may try this
$(function(){
$('#toSel1, #toSel2').on('click', function(){
if($(this).attr('id')=='toSel2')
{
var l=$('#sel1 option:selected').length;
if(!l) {
alert("Option not selected !");
return false;
}
$('#sel1 option:selected').each(function(){
$('#sel2').append($(this));
});
}
else
{
var l=$('#sel2 option:selected').length;
if(!l) {
alert("Option not selected !");
return false;
}
$('#sel2 option:selected').each(function(){
$('#sel1').append($(this));
});
}
});
});
DEMO.
i have a regular combobox and i am listening to the change event and sticking the selected value in an html table. this all works fine but there is one issue. Right now, the user can select the same item more than once (which i dont want to allow).
At the point of where an item is selected, i want to:
Capture the value and stick it in the table (which i am doing now and code is below)
<script type="text/javascript">
$(document).ready(function() {
$('#categories').change(function() {
if (this.selectedIndex != 0) {
addRowToTable(this.value);
}
});
}
And i am trying to figure how to do #2 and #3 below . .
reset the selectedindex back to 0 (which says "Please select . .")
Not allow that selection to be selected again (and any visual representation on disabling that dropdown item).
Number 1 is pretty simple:
$('#categories option:first').get(0).selectedIndex = 0;
You can also use the value of the option against the dropdown list like so:
$('#categories').val('myOptionValue');
To prevent an item from being selected a second time, I would remove it from the dropdown list with something like this:
$('#categories option[value=valueToRemove]').remove();
cballou's answer sets #rel="disabled" on the select element, which causes the "single selection allowed bug".
I would tweak it to look like the below code. Also, I'd recommend setting a class instead of using the rel attribute. That way you add styles (browser permitting) that indicate to the user that the option is disabled.
CSS:
#categories .disabled { background:#c00; }
JS:
$(document).ready(function() {
$('#categories').change(function() {
var selectedIndex = this.selectedIndex,
selection;
if ( selectedIndex !== 0 ) {
selection = $(this.options[selectedIndex]);
if( !selection.hasClass('disabled') ) {
addRowToTable(this.value);
selection.addClass('disabled');
}
}
// reset selected index
$(this).val('');
});
});
OK if i were you i wouldnt use a Drop down box for this... i would use multiple <select multiple="true"> which is going to allow you to select multiple items at a time by using ctrl+click (cmd+click on mac), then i would have an add button to click when done. this would fire the js taht would grab all the selected options put em in your table or what have you and then then remove them from the select box.
http://www.w3schools.com/TAGS/att_select_multiple.asp
You could add a rel="disabled" attribute to the option and check for it like so:
$(document).ready(function() {
$('#categories').change(function() {
if (this.selectedIndex != 0 && $(this).attr('rel') != 'disabled') {
addRowToTable(this.value);
$(this).attr('rel', 'disabled');
}
});
});
If your first option (selectedIndex 0) has an empty value, you can easily reset like so:
$(document).ready(function() {
$('#categories').change(function() {
if (this.selectedIndex != 0 && $(this).find('option:selected').attr('rel') != 'disabled') {
addRowToTable(this.value);
$(this).find('option:selected').attr('rel', 'disabled');
}
// reset selected index
$(this).val('');
});
});