Hy everyone, I want to select multiple dropdown menu , In which value select without CTRL. I tried this code http://jsfiddle.net/xQqbR/1022/ ,
Its working perfectly but I want to use the Shift key to select multiple values as well. In this code its not working.
I tried this code for selecting maximum value but still not working when we start selecting bottom to top.
var shifted1 = false;
var last_selected = '';
$('#abc option').mousedown(function(e) {
e.preventDefault();
var originalScrollTop = $(this).parent().scrollTop();
//console.log(originalScrollTop);
if (shifted1 == false) {
last_selected = $(this);
$(this).prop('selected', $(this).prop('selected') ? false : true);
}
//when shift key is pressed
else {
shifted1 = false;
for (var i = 0; i < $(this).parent().children().length; i++) {
if (last_selected.next().val() != $(this).val()) {
last_selected.next().prop('selected', true);
last_selected = last_selected.next();
} else {
last_selected = $(this);
$(this).prop('selected', true);
break;
}
}
}
var self = this;
$(this).parent().focus();
setTimeout(function() {
$(self).parent().scrollTop(originalScrollTop);
}, 0);
//return false;
});
$(document).on('keyup keydown', function(e) {
shifted1 = e.shiftKey;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<select id="abc" multiple="multiple">
<option value="1">Opt</option>
<option value="2">Opt</option>
<option value="3">Opt</option>
<option value="4">Opt</option>
<option value="5">Opt</option>
<option value="6">Opt</option>
<option value="7">Opt</option>
<option value="8">Opt</option>
<option value="9">Opt</option>
<option value="10">Opt</option>
<option value="11">Opt</option>
<option value="12">Opt</option>
<option value="13">Opt</option>
<option value="14">Opt</option>
<option value="15">Opt</option>
</select>
Thanks in advance.
Related
I want to use a multiselect dropdown like in this example by #glyuck
http://jsfiddle.net/surajkm33/tsomyckj/
<select id="divRatings" class="selectpicker" multiple data-size="5" data-selected-text-format="count>2">
<option value="All" selected="selected">All Ratings</option>
<option value="EC">EC (Early Childhood)</option>
<option value="E">E (Everyone)</option>
<option value="E10+">E10+ (Everyone 10+)</option>
<option value="T">T (Teen)</option>
<option value="M">M (Mature)</option>
<option value="AO">AO (Adults Only)</option>
</select>
<script>
$('#divRatings').on('change', function(){
var thisObj = $(this);
var isAllSelected = thisObj.find('option[value="All"]').prop('selected');
var lastAllSelected = $(this).data('all');
var selectedOptions = (thisObj.val())?thisObj.val():[];
var allOptionsLength = thisObj.find('option[value!="All"]').length;
console.log(selectedOptions);
var selectedOptionsLength = selectedOptions.length;
if(isAllSelected == lastAllSelected){
if($.inArray("All", selectedOptions) >= 0){
selectedOptionsLength -= 1;
}
if(allOptionsLength <= selectedOptionsLength){
thisObj.find('option[value="All"]').prop('selected', true).parent().selectpicker('refresh');
isAllSelected = true;
}else{
thisObj.find('option[value="All"]').prop('selected', false).parent().selectpicker('refresh');
isAllSelected = false;
}
}else{
thisObj.find('option').prop('selected', isAllSelected).parent().selectpicker('refresh');
}
$(this).data('all', isAllSelected);
}).trigger('change');
</script>
But I want the text to be "All ratings" when all options are selected, instead of "7 items selected".
Any ideas on how to achieve that? I am new to JS so I don't have a clue!
Have you tried using something like select2
I'm having Two Dropdown name as Product and Product line and both are dependent on each other such that after selecting any product only Product Line dropdown will get enable. the sample structure is as below.
<select name="abb_sf_partners-product" data-abb-sf-productelement="" class="abb-select" disabled="">
<option value="">All products</option>
<option value="AA">Product1</option>
<option value="BB">Product2</option>
<option value="BB">Product3</option>
</select>
<select name="abb_sf_partners-product-line" data-abb-sf-productelement="" class="abb-select" disabled="">
<option value="">All products Line</option>
<option value="CC">ProductLine1</option>
<option value="DD">ProductLine2</option>
<option value="EE">ProductLine3</option>
</select>
<SCRIPT>
document.addEventListener("DOMContentLoaded", function() {
checkDropdownvalue();
});
function disableProductline() {
document.querySelector('select[name="abb_sf_partners-product-line"]').disabled = true;
}
function checkDropdownvalue() {
document.querySelector('select[name="abb_sf_partners-product"]').onchange = (e) => {
var selectedProductline = e.target.value;
alert(e.target.value)
if (selectedProductline == "AA") {
disableProductline();
}
}
}
</SCRIPT>
on select of AA in product dropdown ill needed to disable the ProductLine Dropdown.
But i'm guessing due to some razor view changes Product Line dropdown is keep getting enable as the data in Product Line is dynamically inserted
So is there any way such that my code will execute at the end to disable it.
You can try this approach.
document.addEventListener("DOMContentLoaded", function() {
checkDropdownvalue();
});
function checkDropdownvalue() {
const productSelect = document.querySelector('[name="abb_sf_partners-product"]');
const productLine = document.querySelector('[name="abb_sf_partners-product-line"]')
productSelect.addEventListener('change', function(e) {
if (e.target.value === 'AA') {
productLine.disabled = true;
} else {
productLine.disabled = false;
}
});
}
<select name="abb_sf_partners-product" data-abb-sf-productelement="" class="abb-select">
<option value="">All products</option>
<option value="AA">Product1</option>
<option value="BB">Product2</option>
<option value="BB">Product3</option>
</select>
<select name="abb_sf_partners-product-line" data-abb-sf-productelement="" class="abb-select" disabled="true">
<option value="">All products Line</option>
<option value="CC">ProductLine1</option>
<option value="DD">ProductLine2</option>
<option value="EE">ProductLine3</option>
</select>
As mentioned in My case Product Line dropdown was getting enable due to some razor view code. In order resolve this instead of comparing value of a product on change of product dropdown I have done the comparison on Product Line dropdown like if i hover my mouse over Product line dropdown it then trigger an event to check the selected product and compare it with the one i want (i have not used onClick as momentarily(for few milisec) it open the dropdown and then disable it ) i have used below JS script to achieve this.
document.addEventListener("DOMContentLoaded", function()
{
document.querySelector('select[name="abb_sf_partners-product-line"]').onmouseover = function fun() {
var selectedproduct = getSelectedProduct();
/* alert(selectedproduct.value); */
if(selectedproduct.value == "AA")
{
document.querySelector('select[name="abb_sf_partners-product-line"]').disabled = true;
}
else
{
document.querySelector('select[name="abb_sf_partners-product-line"]').disabled = false;
}
}
});
function getSelectedProduct(){
var sel = document.querySelector('select[name="abb_sf_partners-product"]');
var selectedP = getSelectedOption(sel);
function getSelectedOption(sel) {
var opt;
for ( var i = 0, len = sel.options.length; i < len; i++ ) {
opt = sel.options[i];
if ( opt.selected === true ) {
break;
}
}
return opt;
}
return selectedP
}
I hope it will help someone lol.
Fiddle Link
I have two types of optgroup with option.
I need to validate between two groups. How to do that ?
Case 1
If i select the A optgroup.simuultanseuly i cant able to select optgroup B
i need to select any one. can't select both at the same time.
Javascript
$('#select').change(function () {
var selectedOption = $('#select option:selected');
var label = selectedOption.closest('optgroup').attr('label');
var selectText = selectedOption.text();
if(label == 'A'){ $('.selectoption').val(label); }
var length = $(this).find(':selected').text().length;
$('')
if(label== 'A'){
alert('check');
} else {
alert('no test');
}
// if (length < 2) {
//$(this).find(':selected').text(label + ' - ' + selectText);
//}
});
You can use element.prop('disabled', boolean) to disable / enable the form elements.
You can disable the other optgroup using the above technique like this:
$(function(){
$('#select').change(function () {
$('optgroup').prop('disabled', false);
$('optgroup').removeClass('selected');
var selectedOption = $('#select option:selected');
$(".selectoption").val(selectedOption.closest('optgroup').attr('label'));
selectedOption.closest('optgroup').addClass('selected');
var label = selectedOption.closest('optgroup').attr('label');
var selectText = selectedOption.text();
$(this).find('optgroup').each(function(i) {
if(!$(this).hasClass('selected')) {
$(this).prop('disabled', true);
} else {
$(this).prop('disabled', false);
}
});
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select" multiple style="height:150px;width:150px;">
<optgroup label="A">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</optgroup>
<optgroup label="B">
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
</optgroup>
</select>
<input type="text" name="selectoption" class="selectoption" value="" />
I have a list of users and each has a role.
The user who is selected as "Líder" can not have more than one role, only "Líder".
If the user selects another option (daughters) the option "Líder" should be disabled. Users who are not "Líder" can have more than one role.
Here is a simulation of the problem: jsfiddle
HTML:
<select class="selectpicker" id="funcao" multiple data-max-options="1">
<option value="lider">Líder</option>
<option value="conhecimento">Para Conhecimentor</option>
<option value="participante">Participante</option>
</select>
<br><br>
<select class="selectpicker" id="funcao" multiple data-max-options="1">
<option value="lider">Líder</option>
<option value="conhecimento">Para Conhecimentor</option>
<option value="participante">Participante</option>
</select>
<br><br>
<select class="selectpicker" id="funcao" multiple data-max-options="1">
<option value="lider">Líder</option>
<option value="conhecimento">Para Conhecimentor</option>
<option value="participante">Participante</option>
</select>
<br><br>
<select class="selectpicker" id="funcao" multiple data-max-options="1">
<option value="lider">Líder</option>
<option value="conhecimento">Para Conhecimentor</option>
<option value="participante">Participante</option>
</select>
JS:
$('select').change(function(){
var sel = $(this);
var data = sel.data('prev');
var val = sel.val();
var prev;
if(data){ prev = data.val; }
sel.data('prev', {val: val});
sel.nextAll().each(function(){
if(prev){
$(this).find("[value='" + prev+ "']").prop("disabled",false);
$('.selectpicker').selectpicker('refresh');
}
$(this).find("[value='" + val + "']").prop("disabled",true);
$('.selectpicker').selectpicker('refresh');
});
$('.selectpicker').selectpicker('refresh');
});
You can check the effect obtained with the code below - jsfiddle
$('select').change(function() {
var sel = $(this);
disableThis(sel);
$('.selectpicker').selectpicker('refresh');
});
function disableThis(sel) {
var temSelecionado = false;
$("option[value='1']").each(function() {
if (this.selected) {
temSelecionado = true;
$(this).parent().each(function() {
$(this.options).each(function() {
if ($(this).val() != "1") {
$(this).prop("disabled", true);
}
})
});
}
else {
$(this).parent().each(function() {
$(this.options).each(function() {
if ($(this).val() != "1") {
$(this).prop("disabled", false);
}
})
});
}
});
}
So I found this fiddle and I want to sort of merge it with this one. So when you click the button 3 times, they each have id 0, 1, 2 respectively. I then want to be able to hide the values of selected options from the other select elements. I tried to dynamically create the function from the working example but didn't manage to do it. Any help would be appreciated!
First fiddle;
JavaScript
$("#first").change(function() {
if($("#first").val() != "none") {
$("#second option[value!="+$("#first").val()+"]").show();
$("#second option[value="+$("#first").val()+"]").hide();
} else {
$("#second option[value!="+$("#first").val()+"]").show();
}
});
$("#second").change(function() {
if($("#second").val() != "none") {
$("#first option[value!="+$("#second").val()+"]").show();
$("#first option[value="+$("#second").val()+"]").hide();
} else {
$("#first option[value!="+$("#second").val()+"]").show();
}
});
HTML
<select id="first">
<option value="none">None</option>
<option value="one">Toyota</option>
<option value="two">Nissan</option>
<option value="three">Dodge</option>
</select>
<select id="second">
<option value="none">None</option>
<option value="one">Toyota</option>
<option value="two">Nissan</option>
<option value="three">Dodge</option>
</select>
Second fiddle;
JavaScript
arrSelects = [];
function generateSelect() {
var para = document.createElement("select");
$(para).attr('class', 'selectClass');
$(para).attr('id', arrSelects.length);
document.getElementById("createHere").appendChild(para);
arrSelects.push(' ');
fillSelect();
}
function fillSelect() {
$( ".selectClass").each( function () {
if ($(this).has('option').length < 1) {
for (var i = 0; i < 5; i++){
$(this).append('<option value='+i+'>'+i+'</option> ');
}
}
})
}
HTML
<button onclick="generateSelect()" onclick="generateFunction()">Click Me!</button>
<div id="createHere"></div>