Need to disable option "5" & "6" when the option value "2" is selected. It should display all the options in the List_2 when option "1" is selected. How can I do that using jQuery or any other method.
if ($('option[value=2]').prop('selected', true)) {
$('option[value=5]').prop('disabled', true);
}
<HTML>
<body>
<select id= "List_1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select id= "List_2">
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</body>
</HTML>
Here you go with a solution https://jsfiddle.net/eurbvzk1/
var disabledDic = {
"1" : ["6"],
"2" : ["4", "5"],
"3" : []
}
$('select#list_1').on('change', function(){
$('select#list_2 option').each(function(){
$(this).removeAttr('disabled');
});
var disableOption = disabledDic[$(this).val()];
$.each( disableOption, function(i){
$('option[value="' + disableOption[i] + '"]').prop('disabled', 'disabled');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="list_1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 2</option>
</select>
<select id= "list_2">
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
Create a dictionary that will contain each first select option as key & value will be list of disabled options from second list.
Onchange method check the dictionary & loop through the disabled value.
Hope this will help you.
With plain JS:
document.getElementById('List_1').onchange = function() {
document.getElementById('List_2')[1].disabled = (document.getElementById('List_1').selectedIndex == 1);
document.getElementById('List_2')[2].disabled = (document.getElementById('List_1').selectedIndex == 1);
}
<select id="List_1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select id="List_2">
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I need if selected number 1 or 2 or 7 the div id show but if the other number div hide
<select class="custom-select" id="selectEmployer">
<option selected>Vyberte</option>
<option value="1">Employer 1</option>
<option value="2">Employer 2</option>
<option value="3">Employer 3</option>
<option value="4">Employer 4</option>
<option value="5">Employer 5</option>
<option value="6">Employer 6</option>
<option value="7">Employer 7</option>
</select>
<div id="employer">SHOW</div>
You can do something like this:
$("#selectEmployer").change(function() {
$("#employer").hide();
if ($.inArray($(this).val(), ["1", "2", "7"]) > -1) {
$("#employer").show();
}
})
Demo
$("#selectEmployer").change(function() {
$("#employer").hide();
if ($.inArray($(this).val(), ["1", "2", "7"]) > -1) {
$("#employer").show();
}
})
#employer {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="custom-select" id="selectEmployer">
<option selected>Vyberte</option>
<option value="1">Employer 1</option>
<option value="2">Employer 2</option>
<option value="3">Employer 3</option>
<option value="4">Employer 4</option>
<option value="5">Employer 5</option>
<option value="6">Employer 6</option>
<option value="7">Employer 7</option>
</select>
<div id="employer">SHOW</div>
Vanilla javascript solution would be:
var selectElem = document.getElementById("selectEmployer");
var divElem = document.getElementById("employer");
var showFor = [1,2,7];
divElem.style = "display:none;"
selectElem.addEventListener('change', function(e) {
var selectValue = parseInt(e.target.value);
if (showFor.includes(selectValue)) {
divElem.style = "";
} else {
divElem.style = "display:none;"
}
});
<select class="custom-select" id="selectEmployer">
<option selected>Vyberte</option>
<option value="1">Employer 1</option>
<option value="2">Employer 2</option>
<option value="3">Employer 3</option>
<option value="4">Employer 4</option>
<option value="5">Employer 5</option>
<option value="6">Employer 6</option>
<option value="7">Employer 7</option>
</select>
<div id="employer">SHOW</div>
Here I hope this does what you need it to
https://stackblitz.com/edit/angular-dm1w3a
<select class="custom-select" id="selectEmployer" (ngModelChange)="checkChange($event)" [(ngModel)]="selectedValue">
<option selected>Vyberte</option>
<option value="1">Employer 1</option>
<option value="2">Employer 2</option>
<option value="3">Employer 3</option>
<option value="4">Employer 4</option>
<option value="5">Employer 5</option>
<option value="6">Employer 6</option>
<option value="7">Employer 7</option>
</select>
<div id="employer" *ngIf="selectedValue === '1' || selectedValue === '2' || selectedValue === '7'">SHOW</div>
I have a select box with various options which are loaded dynamically . I am writing code to iterate through the code and make it the default option if the text value is a particular value example for in this case 8065992445. Not getting a way to do it.
$("#locationselect > option").each(function() {
if(this.text==8065992445)
});
Use val method to get the value of select option:
$("#locationselect > option").each(function() {
if($(this).val()==8065992445){
//do your task...
}
});
If you want to check value of option use $(selector).val() to getting value of option.
$("option").each(function(){
if ($(this).val() == "3")
$(this).text($(this).text() + " - Changed");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
And if you want to check text of option use $(selector).text() to getting text of option.
$("option").each(function(){
if ($(this).text() == "Option 2")
$(this).text($(this).text() + " - Changed");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
I am surrently having an issue using JQuery. I have 2 select fields.
<select id="cat" name="cat_id">
<option value="2">Cat 2</option>
<option value="3">Cat 3</option>
<option value="4">Cat 4</option>
</select>
<select id="subcat" name="subcat_id">
<option class="subcats cat_2" value="1">Subcat 1</option>
<option class="subcats cat_2" value="2">Subcat 2</option>
<option class="subcats cat_3" value="3">Subcat 3</option>
<option class="subcats cat_3" value="4">Subcat 4</option>
<option class="subcats cat_3" value="5">Subcat 5</option>
<option class="subcats cat_0" value="0">No subcats for this cat</option>
</select>
And here is my JavaScript code
<script type="text/javascript">
var curval = $("#cat").val();
$(".subcats").hide(0);
$(".cat_"+curval).show(0);
$("#cat").change(function(){
var cat = $(this).val();
$(".subcats").removeAttr("selected").hide(0);
if($(".cat_"+cat).length == 0){$(".cat_0").show(0);}
else{$(".cat_"+cat).show(0);}
});
</script>
Here is the problem. When I change the value of the cats select, the options for the subcats are changed correctly. However, the currently selected field is still showing (Even if it doesn't correspond to the current cat).
Any help would be greatly appreciated.
You should change your code a little bit so on the hange event it can add the selected attribute to the first element in the available options :)
var curval = $("#cat").val();
$(".subcats").hide(0);
$(".cat_" + curval).show(0);
$("#cat").change(function() {
var cat = $(this).val();
$(".subcats").removeAttr("selected").hide(0);
if ($(".cat_" + cat).length == 0) {
$(".cat_0").attr("selected", "selected").show(0);
} else {
$(".cat_" + cat).eq(0).attr("selected", "selected");
$(".cat_" + cat).show(0);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="cat" name="cat_id">
<option value="2">Cat 2</option>
<option value="3">Cat 3</option>
<option value="4">Cat 4</option>
</select>
<select id="subcat" name="subcat_id">
<option class="subcats cat_2" value="1">Subcat 1</option>
<option class="subcats cat_2" value="2">Subcat 2</option>
<option class="subcats cat_3" value="3">Subcat 3</option>
<option class="subcats cat_3" value="4">Subcat 4</option>
<option class="subcats cat_3" value="5">Subcat 5</option>
<option class="subcats cat_0" value="0">No subcats for this cat</option>
</select>
am trying to remove null value in listbox so first i tried with loop and then one guy helped to do this way but its not removing a null value and empty space...can some body
help out this problem by javascript..
<script type="text/javascript">
function change()
{
//document.getElementById("Geography").options[7]=new Option("", "newval", true, false);
var optionsArr = [];
optionsArr.push(document.getElementById("Geography").options);
optionsArr.push(document.getElementById("zone").options);
optionsArr.push(document.getElementById("country").options);
var optArrlenght = optionsArr.length;
for ( var j = 0; j < optArrlenght; j++){
var options = optionsArr[j];
var optionslength = options.length
for (var i = 0; i < optionslength; i++)
{
if (options[i].innerHTML == "Null Value" || options[i].innerHTML == "")
{
options.removeChild(options[i]);
// OR
// options.options[i] = null;
}
}
}
}
</script>
</head>
<body onload="change()">
Geography:<select id="Geography">
<option value="0"></option>
<option value="1">Null Value</option>
<option value="2">item 2</option>
<option value="3">item 3</option>
<option value="4">item 4</option>
<option value="0">All</option>
</select>
zone: <select id="zone" >
<option value="0"></option>
<option value="1">Null Value</option>
<option value="2">item 2</option>
<option value="3">item 3</option>
<option value="4">item 4</option>
<option value="0">All</option>
</select>
country:<select id="country" >
<option value="0"></option>
<option value="1">Null Value</option>
<option value="2">item 2</option>
<option value="3">item 3</option>
<option value="4">item 4</option>
<option value="0">All</option>
</select>
</body>
Hi whether u have found out solution or not still i put my answer here..
http://jsbin.com/awUWAMeN/2/edit
function change()
{
$('select').each(function() {
$(this).find('option:contains("Null Value")').remove();
});
}
This is not the proper way to remove a dom element: .removeChild() should be called on the elements parent. Instead of options.removeChild(options[i]);, try:
options[i].parentElement.removeChild(options[i]);
Also, if you want to remove the element from the array options call the following:
options.splice(i, 1);
You just need to make the following changes:
1.
<option value="0"></option>
<option value="Null Value">Null Value</option>
<option value="item 2">item 2</option>
<option value="item 3">item 3</option>
<option value="item 4">item 4</option>
<option value="All">All</option>
2.Inside Loop in function change you need to do following
if (options[i].value == "Null Value" )
{ options.removeChild(options[i]);}
if(options[i].innerHTML == "")
{ options.removeChild(options[i])}
I have a list like that:
<select size="1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
How can I get the value of this options with JavaScript (Getting the "1", "2", "3" and so on...).
if you add the id of "list" to <select> this should work: Example Here
document.getElementById('list').onchange = function( e) {
alert( this.value )
}
to get it directly without using this:
document.getElementById('list').value
document.getElementsByTagName("select")[0].value;
or
mySelection = function(element){
console.log(element.value);
}
<select onchange="mySelection(this);">