This question already has answers here:
How do you select a particular option in a SELECT element in jQuery?
(21 answers)
Closed 5 years ago.
I am trying to disable all options in all select boxes with specific value on page.
If there are 5 select boxes and each have 4 options. Like this:
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
I want to disable all options with value 3 on whole page, how would i achieve this?
$("select option["+previous+"]").attr('disabled', 'disabled');
But this is disabling Select option with selected value 3.
Any help will be appreciated.
Looks like whatever you passing treated as a index of inside select. Try value attribute selector
$("select option[value ="+previous+"]").attr('disabled', 'disabled');
You can do it using value attribute in jquery.
$("select option[value='3']").attr('disabled', 'disabled');
Here you go with a solution using ES6 template literal
var previous = 3;
$(`select option[value=${previous}]`).prop('disabled', true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
Hope this will help you.
Related
i want to be disabled duplicate options in my dropdown but my jquery are confuse.
var map = {};
$('select.ex option').addClass(function () {
if (map[this.value]) {
$(this).prop('disabled',true)
}
map[this.value] = true;
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='ex'>
<option value="1">1</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select class='ex'>
<option value="1">1</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="4">4</option>
</select>
I necessary to write same class name. it's possible to edit my code to disabled duplicate options?
You can use .each loop to iterate through your select then loop through option inside selects and if the value already exist inside {} remove them else mark it as true.
Demo Code :
//loop through select
$('select.ex').each(function() {
var map = {}; //define this
//loop through options
$(this).find("option").each(function() {
if (map[this.value]) {
$(this).prop('disabled', true)
} else {
map[this.value] = true;
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='ex'>
<option value="1">1</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select class='ex'>
<option value="1">1</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="4">4</option>
</select>
How can I copy the select option element after a specific option value in JavaScript/jQuery?
Here's my two selects
First select where I want to copy the option below the copy value
<select class="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="copy">Copy below</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
Second select where I want to append what I copy on first element
<select class="select">
<option value="1">1</option>
<option value="2">2</option>
</select>
You can target the option element with attribute equal selector, along with .nextAll(), .clone() and .appendTo() to create clone of option element and append in second select dropdown
$('option[value=copy]').nextAll().clone().appendTo('.select2');
$(function(){
$('option[value=copy]').nextAll().clone().appendTo('.select2');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="copy">Copy below</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select class="select2">
</select>
First select the first element to copy :
let $copyElement = $('#firstSelect option[value="copy"]').next();
Then, while elements are available, clone them and append them to the second select:
while($copyElement.length > 0) {
$('#secondSelect').append( $copyElement.clone() );
$copyElement = $copyElement.next();
}
let $copyElement = $('#firstSelect option[value="copy"]').next();
while($copyElement.length > 0) {
$('#secondSelect').append( $copyElement.clone() );
$copyElement = $copyElement.next();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="select" id="firstSelect">
<option value="1">1</option>
<option value="2">2</option>
<option value="copy">Copy below</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select class="select" id="secondSelect">
<option value="1">1</option>
<option value="2">2</option>
</select>
Consider the following example.
$(function() {
function copyOpts(a, b) {
if ($("option:selected", a).val() == "copy") {
$("option:selected", a).nextAll().clone().appendTo(b);
}
}
$(".primary").change(function() {
copyOpts($(".primary"), $(".secondary"));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="select primary">
<option value="1">1</option>
<option value="2">2</option>
<option value="copy">Copy below</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select class="select secondary">
<option value="1">1</option>
<option value="2">2</option>
</select>
You can move the if() statement to either the change callback, or leave it in the function.
See more:
https://api.jquery.com/nextAll/
https://api.jquery.com/clone/
https://api.jquery.com/appendTo/
I need to disable the options in the Aspired drop-down menu.
E.g User chose 3 for "Current" and the option 1 and 2 will be disabled for Aspired. If the user chose 4 in "Current" then option 1, 2 and 3 will be disabled and so on and so forth. I need help in creating logic using JavaScript.
<label>Current:</label>
<select name="Current">
<option value="select">Select</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>
<label>Aspired:</label>
<select name="Aspired">
<option value="select">Select</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>
This might help you with your logic. Remember it's an ES6 way.
Pure Js ES6 Version
function onCurrentChange() {
const options = document.getElementById("aspired").options;
const listArray = Array.from(options);
listArray.forEach(item => {
if (item.value < document.getElementById("current").value) {
item.disabled = true;
}
});
}
<label>Current:</label>
<select name="Current" id="current" onchange="onCurrentChange()">
<option value="select">Select</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>
<label>Aspired:</label>
<select name="Aspired" id="aspired">
<option value="select">Select</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>
The backward compatible version (IE9+) Version
function onCurrentChange() {
const options = document.getElementById("aspired").options;
Array.prototype.forEach.call(options, function(child, index) {
if (child.value < document.getElementById("current").value) {
child.disabled = true;
}
});
}
<label>Current:</label>
<select name="Current" id="current" onchange="onCurrentChange()">
<option value="select">Select</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>
<label>Aspired:</label>
<select name="Aspired" id="aspired">
<option value="select">Select</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>
Jquery Version
function onCurrentChange() {
$("#aspired option").each(function() {
if ($(this).val() < $("#current").val()) {
$(this).attr("disabled", true);
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Current:</label>
<select name="Current" id="current" onchange="onCurrentChange()">
<option value="select">Select</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>
<label>Aspired:</label>
<select name="Aspired" id="aspired">
<option value="select">Select</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>
Not ready to write any code now, but you can use JavaScript to get the value of the "current" select after it has been selected, to do that you can add a click event listener for the options.
To get the value, check out this thread Get selected value in dropdown list using JavaScript?
From there, use it to automatically populate the options for the aspired select element, using conditions based on the first value...
This might help for the last step Adding options to select with javascript
function disFun(){
var Aspired = document.getElementById("Aspired").options;
var Current = document.getElementById("Current").value;
for (var i=1; i < +Current; i++) {
Aspired[i].disabled = true;
}
}
<label>Current:</label>
<select id="Current" name="Current" onchange="disFun()">
<option value="select">Select</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>
<label>Aspired:</label>
<select id="Aspired" name="Aspired">
<option value="select">Select</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>
If you can use Jquery. You need to select the value chosen say n from Current select. Then loop until that value from 1 to n in the Aspired select and add 'disabled attribute' as true
<label>Current:</label>
<select name="Current">
<option value="select">Select</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>
<label>Aspired:</label>
<select name="Aspired">
<option value="select">Select</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>
$(document).ready(function(){
$("select[name='Current']").change(function(){
$("select[name='Aspired']").children("option").attr('disabled', false) // makes all options to selectable in case of new selection in Current select
for (i = 0; i < $(this).children("option:selected").val(); i++) {
$("select[name='Aspired']").children('option[value='+ i +']').attr('disabled', true) // disabling all the values uptil the select value
}
});
});
I have a table with a row of drop down menus with the values 1 -5. When the user selects a value less than three on any box, I want a pop up box to appear underneath the table. The popup only needs to appear once for any amount of drop downs that have a value less than 3, not once for every value less than 3. The code works when I assign the <select id='purpose'>, but it will only work on the first <select>. How do I make it work for all of them?
using this function:
$(document).ready(function(){
$('#purpose').on('change', function() {
if ( this.value < 3)
{
$("#business").show();
}
else
{
$("#business").hide();
}
});
});
Snippet of the HTML:
<td>
<select id='purpose'>
<option value="" selected="selected">Select...</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>
</td>
<td>
<select id='purpose'>
<option value="" selected="selected">Select...</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>
...
</table>
<div style='display:none;' id='business'>
<input type='text' class='text' name='business' placeholder="You gave a rating of less than 3 in one or more categories. Please provide a brief explination as to why." />
<br/>
</div>
Each select element should be assigned to to the same class rather than the same id. Then, the logic can be applied to all classes.
<td>
<select class="purpose">
<option value="" selected="selected">Select...</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>
</td>
<td>
<select class="purpose">
<option value="" selected="selected">Select...</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>
</td>
And the appropriate selector is:
$(document).ready(function(){
$('.purpose').on('change', function() {
if ( this.value < 3) {
$("#business").show();
} else {
$("#business").hide();
}
});
});
First you have duplicate ids which should be removed.
The popup only needs to appear once for any amount of drop downs that have a value less than 3, not once for every value less than 3. The code works when I assign the , but it will only work on the first . How do I make it work for all of them?
If you want the change event for work on both the both select you
can just attach on select element. This will trigger the code for all
select elements as below.
$(document).ready(function(){
$('select').on('change', function() {
if ( this.value < 3)
{
$("#business").show();
}
else
{
$("#business").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td>
<select >
<option value="" selected="selected">Select...</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>
</td>
<td>
<select>
<option value="" selected="selected">Select...</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>
...
</table>
<div style='display:none;' id='business'>
<input type='text' class='text' name='business' placeholder="You gave a rating of less than 3 in one or more categories. Please provide a brief explination as to why." />
<br/>
</div>
for disable option im using this:
function handleSelection(source, dest) {
itemRemove = dest.length - source.selectedIndex;
for(i=dest.length-1; i>=itemRemove; i--){
dest.options[i].disabled = true;
}
}
<select id="s1" onchange="handleSelection(this, s2)">
<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>
</select>
<select id="s2" onchange="handleSelection(this, s1)">
<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>
</select>
but this job only with 2 select. I need then this job with multiple select.
Thanks!
I am not sure what you trying to do and if you approach is good but try my code. it will work
function handleSelection(source, destArr) {
for( dest in destArr){}
itemRemove = dest.length - source.selectedIndex;
for(i=dest.length-1; i>=itemRemove; i--){
dest.options[i].disabled = true;
}
}
}
<select id="s1" onchange="handleSelection(this, [s2,s3,s5])">
<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>
</select>
<select id="s2" onchange="handleSelection(this, [s6,s7,s8])">
<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>
</select>
in my script, selecting for example 2 in the first select, in the second clear the 4 and 3, and then remains the 1 and 2. (4 - 2 = 2). It works well, but now I can do the same job with the most select