I have found a huge amount of problem-related to my problem. Actually, I have the solution about "without holding Ctrl button to select the option."
For better reference: Selecting multiple from an html select element without using ctrl key
I got the best solution in the following question. But the problem is that I need a function having both
1. without holding the Ctrl button
2. limited the selection option less than 3
Here the code for HTML select element without using ctrl key
window.onmousedown = function (e) {
var el = e.target;
if (el.tagName.toLowerCase() == 'option' && el.parentNode.hasAttribute('multiple')) {
e.preventDefault();
// toggle selection
if (el.hasAttribute('selected')) el.removeAttribute('selected');
else el.setAttribute('selected', '');
// hack to correct buggy behavior
var select = el.parentNode.cloneNode(true);
el.parentNode.parentNode.replaceChild(select, el.parentNode);
}
}
select{
width: 200px;
height: 200px;
}
<select multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
Here the code for limited the option with holding ctrl button:
$("select").on('change', function(e) {
if (Object.keys($(this).val()).length > 3) {
$('option[value="' + $(this).val().toString().split(',')[3] + '"]').prop('selected', false);
}
});
select{
width: 200px;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<select multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
But I can't make the two scripts together. I have tried but there only work only "without holding ctrl" script.
Note: I have found other script in jquery to activate "without holding ctrl" in multi-select option. But they didn't send data correctly. The above pure JS is perfect for me :)
Thanks
Your first script allows for multiple selections to be made by clicking without and with CTRL. You don't need to combine anything.
Related
I have three dropdowns with the same options. What i want is, when i selecte an option from a dropdown, the same option from the other two dropdowns to be disabled, except from the first one (the option 'Select One').
For this i am using the following logic, but here when one dropdown is selected to one value instead of disabling that selected value from the remaining two dropdowns, its disabling from the all of these three dropdowns this i don't want. The disabling of value should happen to the remaining ones but not for the current dropdown.
How can i do this?
<select class="form-control positionTypes">
<option value="">Select One</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<select class="form-control positionTypes">
<option value="">Select One</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<select class="form-control positionTypes">
<option value="">Select One</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
$("select.positionTypes").change(function () {
$("select.positionTypes option[value='" + $(this).data('index') + "']").prop('disabled', false);
$(this).data('index', this.value);
$("select.positionTypes option[value='" + this.value + "']:not([value=''])").prop('disabled', true);
});
here is the fiddle link https://jsfiddle.net/3pfo1d1f/4/
Do it like this: https://jsfiddle.net/sandenay/3pfo1d1f/7/
$("select.positionTypes").change(function () {
$("select.positionTypes option[value='" + $(this).data('index') + "']").prop('disabled', false); //reset others on change everytime
$(this).data('index', this.value);
$("select.positionTypes option[value='" + this.value + "']:not([value=''])").prop('disabled', true);
$(this).find("option[value='" + this.value + "']:not([value=''])").prop('disabled', false); // Do not apply the logic to the current one
});
There is a simple way of doing this. you can achieve the same with simple logic and its easily understandable even for a beginner as well.
How it works:
Reset all the previous selection made on other dropdowns
Disable the selected option on all dropdowns excluding current dropdown.
JQUERY CODE:
$(function () {
$(".positionTypes").on('change', function () {
var selectedValue = $(this).val();
var otherDropdowns = $('.positionTypes').not(this);
otherDropdowns.find('option').prop('disabled', false); //reset all previous selection
otherDropdowns.find('option[value=' + selectedValue + ']').prop('disabled', true);
});
});
Live Demo # JSFiddle
I have two select option buttons on single web page but on different tabs. I want to change the other one button value on change of any one button and assign it to some element like span in example code. All things are working perfectly but it just taking time to close dropdown when i am changing value. in firefox there is no problem
jsfiddle
My HTML Code
<select class="select one" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select><br><br><br>
<select class="select two">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br><br><br>
<span class="value"></span>
JQuery
var lang = $('select.one').val();
$('span.value').text(lang);
$('select.select').change(function(){
lang = $(this).val();
$('span.value').text(lang);
if ($(this).hasClass('one')) {
$('.two').val($(this).val()).trigger('change');
}
else{
$('.one').val($(this).val()).trigger('change');
}
});
Thanks in advance
fixed jsFiddle demo
It's cause you're concurrently triggering changes. Cool that down, this is all you need:
var lang = $('select.one').val();
$('span.value').text(lang);
$('select.select').change(function () {
lang = this.value;
$('span.value').text(lang);
$('.select').val(lang);
});
You can try this instead:
var lang = $('.select.one').val();
$('.value').text(lang);
$('.select').change(function (e) {
$('.select').val(this.value);
$('.value').text(this.value);
});
The issue was .trigger() method, that was traversing up to the dom for lookup and setting the values to each elem again and again.
Check the updated fiddle.
I am having trouble to store all the selected options as a list, my code only sotres the first selected option and ignores the rest. How can I solve this problems?
<label for="itemlist">Items</label>
<br>
<select id="itemlist" name="itemlist" multiple="multiple" required>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<script type="text/javascript">
$(function() {
$('#itemlist').change(function() {
console.log($(this).val());
}).multipleSelect({
width: '100%'
});
});
</script>
Gus,
As you are using it jQuery already $('selector').val(), this will retreive (comma separated) all values selected on the select tag.
Here is an example I've wrote for you using the .on('click', function).
FIDDLE
Hope this helps!
I have a couple select elements with onchange attributes that fire a different functions. For some reason, the function is not running through. I think the problem is in the onchange attribute. Here is the HTML:
<select id="select_level" onchange="updateJumpLevelLink(this.SelectedIndex.value)">
<option value="easy">Level</option>
<option value="easy">Easy</option>
<option value="medium">Medium</option>
<option value="hard">Hard</option>
</select>
<select id="select_puzzle" onchange="updateJumpPuzzleLink(this.SelectedIndex.value)">
<option value="1">Puzzle</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<div id="jump">Jump</div>
This is the javascript:
$(document).ready(function() {
for (i = 1; i <= 10; i++) {
$('#select_puzzle').append('<option value="'+i+'">'+i+'</option>');
}
function updateJumpLevelLink(new_value) {
var current_link = $('#jump_link').attr('href');
$('#jump_link').attr('href', 'sudoku?level='+new_value+'&puzzle='+current_link.substr(current_link.indexOf('?')).split('&')[1].substr('puzzle='.length));
}
function updateJumpPuzzleLink(new_value) {
var current_link = $('#jump_link').attr('href');
$('#jump_link').attr('href', 'sudoku?level='+current_link.substr(current_link.indexOf('?')).split('&')[0].substr('level='.length)+'&puzzle='+new_value);
}
});
Let me know if you see the problem here. Thanks.
i dont know what you want to do in your project, but if the case is onchange, i think this will help you, add jQuery in your JS Libraries it will help you a lot here is my example onCHange sample using jQuery
$( "#select_level" ).change(function() {
alert($(this).val());
});
Fiddle full working.
i used
$( "#select_level" ).change(function() {
var current_link = $('#jump_link').attr('href');
$('#jump_link').attr('href', 'sudoku?level='+$(this).val()+'&puzzle='+current_link.substr(current_link.indexOf('?')).split('&')[1].substr('puzzle='.length));
});
$( "#select_puzzle" ).change(function() {
var current_link = $('#jump_link').attr('href');
$('#jump_link').attr('href', 'sudoku?level='+current_link.substr(current_link.indexOf('?')).split('&')[0].substr('level='.length)+'&puzzle='+$(this).val());
});
Your first problem is that your functions are defined in the document ready, so it won't work because the functions technically don't exist on the global scale. You need to move it outside the document.ready().
Your second problem is that you're passing the wrong value. "this.SelectedIndex.value" should be "this.Value", otherwise it doesn't send anything into the function.
<select id="select_level" onchange="updateJumpLevelLink(this.value)">
Here's the fix: http://jsfiddle.net/yBe6J/3/
I have three identical drop downs. I want to select a value from drop1 and have that value excluded from drop2. Then the selections in drop3 should exclude 1 & 2. Any ideas?
<select name="drop1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="drop2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="drop3">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
You can use change event and remove selected elements from the dom
$('select[name=drop1]').change(function() {
var drop2 = $('select[name=drop2]').empty().hide();
var exclude = $(this).val();
var size = $(this).children().length;
for (var i=0; i<size; ++i) {
if (i != exclude) {
drop2.append('<option value="' + i + '">' + i + '</option>';
}
}
});
if you have more complex example and you need value based explude you can create a clone.
var clone = $('select[name=drop2]').clone();
$('select[name=drop1]').change(function() {
var copy = clone.clone();
copy.find('option[value=' + $(this).val() + ']').remove().end();
$('select[name=drop2]').replaceWith(copy);
});
Depending on how comfortable you are with PHP, or AJAX you have two solutions.
If you are more comfortable with PHP you could have a user submit the data from one select form and then using if statements like
if $value != '1'{
echo '<option value="1">1</option>';
}
and do that for each field in the second form; then replicate that for the third form.
The smoother looking solution would be using AJAX to use a listener to see when a user clicks a field a java value is set as that field and using a similar "if then show" method on the java-script variable to hide the fields that contain that value in the other forms.
Also one of the easiest solutions would be allowing multiple-selections (Assuming you are ok with the look of using one form & the values between the forms are the same like the example you gave above)... That example being:
<select id="my_num" name="my_num" size="5" multiple="multiple" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>