I have a select menu as such:
<select class="priority">
<option value="0">0</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>
</select>
I am using the following piece of code to disable the inputs:
$('[id^=yellow_]').on('click', function () {
var priority_value =$("input:checkbox[id^='yellow_box_']:checked").length;
$('select').children(':nth-child('> + priority_value + ')').prop('disabled', true);
});
Irrespective of the priority_value, all the select menu children are getting disabled on the click event, not just the options grater than priority_value. Why is this happening?
Use the greater than selector
Replace
$('select').children(':nth-child('> + priority_value + ')').prop('disabled', true);
With
$('select').children(':gt(' + priority_value + ')').prop('disabled', true);
Related
How I can change an attribute of an <option> in my second <select> when the same value was selected in the first <select>?
More specifically: When I select an option in my first <select>, then the same option in the second <select> should be disabled.
$("body").on("select2:select", "#first", function(e) {
var cur_id = e.params.data.id;
$("#second").children("option[value=" + cur_id + "]").attr("disabled", "disabled");
$("#second").trigger('refresh');
$("#first").trigger('refresh');
});
$("body").on("select2:select", "#second", function(e) {
var cur_id = e.params.data.id;
$("#first").children("option[value=" + cur_id + "]").attr("disabled", "disabled");
$("#second").trigger('refresh');
$("#first").trigger('refresh');
});
<body>
<select id="first" name="first">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="second" name="second">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</body>
Here is a consise way to do it.
$("select#first").on("change", function() {
$("select#second option").each(function() {
if ($("select#first option:selected").val() === $(this).val()) $(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>
<body>
<select id="first" name="first">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="second" name="second">
<option value="1" disabled="disabled">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</body>
You might want to automatically select (kick to) another option too in your 2nd select when a user selects the option that is selected in the 2nd select. If that makes sense :-)
For select2 version >= 4.0.0
Solution:
$("select").val("1").trigger("change");
$("body").on("change", "#first", function(e) {//use change event
var cur_id = $('option:selected',this).val();//get value of selected option
console.log(cur_id);
$(this).siblings("#second").children("option[value=" + cur_id + "]").attr("disabled", "disabled");//disable from sibling the selected option
});
$("body").on("change", "#second", function(e) {//use change event
var cur_id = $('option:selected',this).val();//get value of selected option
console.log(cur_id);
$(this).siblings("#first").children("option[value=" + cur_id + "]").attr("disabled", "disabled");//disable from sibling the selected option
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<select id="first" name="first">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="second" name="second">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</body>
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 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>
<select class="one">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br />
<select class="one">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br />
<select class="one">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
$(".one").change(function(){
})
I would like make - for example if i select in first position option 1 then i others selects this option should be removed.
So if i in first select i select 1 then in select second and third i have only option 2 and 3. If in second select i select 2 then in last select i have only option 3.
How can i make it? I would like use jQuery.
LIVE: http://jsfiddle.net/9N9Tz/1/
If you need to sort something, consider using something like jQuery UI sortable as a bunch of drop down menus make a really poor UX for that.
But to answer your question:
var $selects = $('.one');
$selects.on("keyup click change", function(e) {
$selects.not(this).trigger('updateselection');
}).on("updateselection", function(e, data) {
var $this = $(this);
$this.children().show();
$selects.not(this).each(function() {
var value = $(this).val();
if (value) {
$this.children('[value="' + value + '"]').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="one">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br />
<select class="one">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br />
<select class="one">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Hiding an option works in current firefox. I'm not sure about legacy browser. Hiding, but not removing, the element makes sure that you can change your selection without having crippled your input elements.
Here you go http://jsfiddle.net/Calou/9N9Tz/6/.
When the value of the <select>s changes, just take this value and search for the <option>s with this value in the others <select>s and remove them.
$(".one").change(function(){
var val = this.value
if (val !== '') {
$(this).siblings().find('option[value=' + val + ']').remove()
}
})
// As soon as all selects have one class, you'll have to distinguish them:
$(".one").each(function() {
// Now this corresponds to one select (in the loop over all)
$(this).change(function() {
// Fix what've done before
$('option').show();
// Find every other select, find an option in it
// that has the same value that is selected in current select
// (sorry for the description)
$('.one').not(this).find('option[value=' + $(this).find('option:selected').val() +']').hide();
});
});
jsFiddle
It will be easy if you use different class for second and third select element
$(".one").change(function(){
var val = parseInt($(this).val());
$('.two,.three').find('option:contains('+val+')').remove();
});
EDIT:
Updated code to apply for multiple selects. [Thanks to all commentators and Alex for bringing it to notice ]
$(".one").change(function(){
var val = parseInt($(this).val());
$(this).siblings().find('option:contains('+val+')').remove();
});
i have 7 dropdown boxes in html. They will all get populated the same data. What I am trying to do is when the first dropdown is selected it would remove the selected item from the next dropdown. So, if you Have data: A,B,C,D,E,F,G,H,I in one dropdown if I select B in the first drop down then in the next dropdown it should only show A,C,D,E,F,G,H,I and so on up to 7 dropdowns. I dont know what would be the best way to approach this in JavaScript. Thanks for your help in advance
Sample Code:
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
You could use attribute targeting. I'll assume jQuery, because why not.
$("select").change(function() {
$(this)
.next("select")
.find("option").removeAttr("disabled")
.end()
.find("option[value=" + $(this).val() + "]").attr("disabled", "disabled");
})
Again, this is just an approach so if you post code we can make better guesses.
Updated
Here's the JSFiddle: http://jsfiddle.net/FaVdu/1/
How about something like this jsFiddle example? The selected options of each drop down is disabled in every other one. This allows you to change an options without removing it.
$('select').change(function() {
var ary = new Array();
$('select option:selected').each(function() {
if ($(this).val().length > 0) {
ary.push($(this).val());
}
});
$('select option').each(function() {
if ($.inArray($(this).val(), ary) > -1) {
$(this).attr('disabled', 'disabled');
} else {
$(this).removeAttr('disabled');
}
});
});
Hi here the solution for above question check it
<script type="text/javascript">
function cleanOptions(selectedOption) {
var val = selectedOption.options[selectedOption.selectedIndex].value;
if(val!="select"){
//Clear all items
$("#drop2 > option").remove();
//Add all options from dropdown 1
$("#" + selectedOption.id + "> option").each(function () {
var opt = document.createElement("option");
opt.text = this.text;
opt.value = this.value;
document.getElementById("drop2").options.add(opt);
});
//Remove selected
$("#drop2 option[value='" + val + "']").remove();
}
}
</script>
<select id="drop1" onchange="cleanOptions(this)">
<option value="select" selected>---select---</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi" >Audi</option>
</select>
<select id="drop2">
<option value="select" selected>---select---</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi" >Audi</option>
</select>