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>
Related
I'm trying to do that this code:
$(document).ready(function () {
$('select').change(function () {
alert(this.value);
});
Alerts a message but only when one of the various dropdowns onscreen is selected. But it works whenever I pick ANY dropdown. How can I do it so that it only works with one specific dropdown?
Simply give your respective select tag an id, then use that id for your selector in your jQuery:
$('#select1').change(function ()
{
alert(this.value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select1">
<option value="">--Please Choose--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="select2">
<option value="">--Please Choose--</option>
<option value="A">Apple</option>
<option value="B">Banana</option>
<option value="C">Cherry</option>
</select>
I am trying to change the value of label with change in drop-down value using jQuery but its not working. Please help me fix this.
<select id="myselect">
<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/>
<label id="label"></label>
<br/>
$("label").val("150.000.000");
$(("#myselect").val()).on('change', function() {
if ($("#myselect").val() == '1') {
$("#label").val("150.000.000");
} else {
$("#label").val("350.000.000");
}
});
Your selector attached to the change event is incorrect, you need to provide the id of the element as a string, not the value of the element itself. Also, label elements don't have a value you need to use text() to change them, and you can use this within the changehandler to refer to the select element. Try this:
$("label").text("150.000.000");
$("#myselect").on('change', function() {
if ($(this).val() == '1') {
$("#label").text("150.000.000");
} else {
$("#label").text("350.000.000");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="myselect">
<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/>
<label id="label"></label>
<br/>
You can even shorten the JS code to this:
$("label").text("150.000.000");
$("#myselect").on('change', function() {
$("#label").text(function() {
return $(this).val() == '1' ? "150.000.000" : "350.000.000";
})
});
You can save all values in an array and can use value to compute index of value to be selected.
Following snippet depicts the same:
var data = ["150.000.000", "350.000.000", "550.000.000", "750.000.000"];
$("#myselect").on("change", function() {
var selectedVal = $("option:selected",this).val();
var newValue = data[parseInt(selectedVal)-1];
$("#label").text(newValue);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select id="myselect">
<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/>
<label id="label"></label>
<br/>
Try this code:
$(document).ready(function() {
$("label").text("150.000.000");
$("#myselect").on('change', function() {
if ($("#myselect").text() == '1') {
$("#label").text("150.000.000");
} else {
$("#label").text("350.000.000");
}
});
});
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 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);
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>