Develop Reference

Jquery select2 - How to disable options in one dropdown without affecting all other dropdowns?

This is what I'm doing:
$('select').each(function () {
var selectedValue = $(this).find('option:selected').val();
if (selectedValue !== '0') {
$('option').each(function () {
if (!this.selected) {
$(this).attr('disabled', true);
}
});
}
});
The first option is "-Select an option-" that has a value of "0", that's why I do that validation. Basically what I want to do is to disable all options within a dropdown that has a selected value different than the first one. All dropdowns have been initialized with jquery's select2 and every one of them has a unique id.
The code I'm sharing doesn't work properly because I get the options disabled in every dropdown no matter if no option has been selected.
Can anybody help me fix this please?

I haven't tested but you should replace this line:
$('option').each(function () {
with this one:
$(this).find('option').each(function () {
Also, you should call this function using change event, which means i'ts triggered when some option is selected, like this:
$('select').on('change', function() {
The thing is that by doing this:
$('select').each(function () {
$('option').each(function () {
You were iterating through all select elements and all it's options, instead of iterating through the only select element that was clicked

update field in table if another field is selected

I have a simple table has 4 columns two of them dropdown menus with class= "ddm1" and "ddm2", what I need:
user can not select from "ddm2" before he select from "ddm1".
when user select any of these two dropdown menus, update flag column with a letter "g", else keep it empty.
here what I tried :
https://jsfiddle.net/yfzndsb3/1/
$(document).ready(function(){
$('select option[value="0"]').attr("selected",true);
$('.cf-table-block tbody tr').each(function () {
$(this).find('.ddm1 option').each(function () {
if(this.selected) {
$('.ddm1 input').closest("tr").find(".flag input").val("g");
}
else {
$('.ddm2').attr('disabled', true);
}
}
});
});
});

Here's what I tried, let me now if this is what you need. You have a little mistake with the class attribute:
<td calss="ddm1">
but I made it different. (Also, you didn't load the jQuery library in your fiddle)
https://jsfiddle.net/yfzndsb3/4/

Is there a way to filter out search results from a chosen jquery select?

I am hiding a particular option from chosen dropdown. I cannot remove it tout court because I need that option on IE6 (!).
The problem that I have is that when I start typing in the input field that hidden option reappears among chosen search results.
I also tried to use the {display_disabled_options: false} option but it is not working (maybe because I am disabling the option after chosen has already been initialized.
I am trying to do this:
$(".chosen-select").chosen({
display_disabled_options: false
}).each(function () {
$(this).on('chosen:showing_dropdown', function (event, params) {
$('li:contains("whatever")').attr('disabled', true);
});
});

If you need to update the list after chosen initialization you need to trigger its update using trigger("chosen:updated").
So use the code:
$(function () {
$('.chzn-select').chosen({
display_disabled_options: false
}).each(function () {
$(this).on('chosen:showing_dropdown', function (event, params) {
$('option:contains("shop")',$(this)).attr('disabled', true);
$(this).trigger("chosen:updated");
});
});;
});
Demo: http://jsfiddle.net/IrvinDominin/NfvBj/

JS with select boxes

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.

Move options between two multi-select fields

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.