Can anyone please why does this javascript work only in firefox?
function filter(obj, what, where)
{
var v = obj.value;
var d = document.getElementById(where).getElementsByTagName('optgroup');
if (v > 0)
{
for (var i = 0; l = d.length, i < l; i++)
{
d[i].className = 'hide';
if (d[i].id == what + '_' + v)
d[i].className = '';
}
}
else
{
for (var i = 0; l = d.length, i < l; i++)
d[i].className = '';
}
}
I tested it in opera, IE7 and chrome but it doesn't work! Opera error console doesn't show any javascript errors when the page is loaded!
This javascript creates three level auto populating drop down boxes...
I don't know whether it's necessary or not but I post the HTML code too...
State:
<select name="state" onchange="filter(this, 'state', 'district');">
<option value="0"></option>
<option value="1">State 1</option>
<option value="2">State 2</option>
<option value="3">State 3</option>
</select>
District:
<select name="district" id="district" onchange="filter(this, 'district', 'city');">
<option value="0"></option>
<optgroup id="state_1" label="State 1">
<option value="1">District 1</option>
<option value="2">District 2</option>
</optgroup>
<optgroup id="state_2" label="State 2">
<option value="3">District 3</option>
</optgroup>
<optgroup id="state_3" label="State 3">
<option value="4">District 4</option>
<option value="5">District 5</option>
<option value="6">District 6</option>
</optgroup>
</select>
City:
<select name="city" id="city">
<option value="0"></option>
<optgroup id="district_1" label="District 1">
<option value="1">City 1</option>
<option value="2">City 2</option>
<option value="3">City 3</option>
</optgroup>
<optgroup id="district_2" label="District 2">
<option value="4">City 4</option>
<option value="5">City 5</option>
</optgroup>
<optgroup id="district_3" label="District 3">
<option value="6">City 6</option>
<option value="7">City 7</option>
</optgroup>
</select>
ok I know whats happening. It works. IE and possibly other browsers don't support many css properties on <optgroup>. I'm assuming you have something like this:
optgroup.hide {display:none;}
The above works in firefox but doesn't in IE. I used firebug lite to see that IE indeed applied the 'hide' class to the optgroup. I then tried changing the background to red instead of display:none and it works in IE. I think you have to find another way of hiding the optgroup. Maybe remove it from the select altogether and add it back in afterwards.
See my sample code below.
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
.hide{background:red}
</style>
<script type="text/javascript">
function filterSelect(obj, what, elID)
{
alert(elID);
var v = obj.value;
var d = document.getElementById(elID).getElementsByTagName('optgroup');
if (v > 0)
{
for (var i = 0; l = d.length, i < l; i++)
{
d[i].className = 'hide';
if (d[i].id == what + '_' + v)
d[i].className = '';
}
}
else
{
for (var i = 0; l = d.length, i < l; i++)
d[i].className = '';
}
}
</script>
</head>
<body>
State:
<select name="state" onchange="filterSelect(this, 'state', 'district');">
<option value="0"></option>
<option value="1">State 1</option>
<option value="2">State 2</option>
<option value="3">State 3</option>
</select>
District:
<select name="district" id="district" onchange="filterSelect(this, 'district', 'city');">
<option value="0"></option>
<optgroup id="state_1" label="State 1">
<option value="1">District 1</option>
<option value="2">District 2</option>
</optgroup>
<optgroup id="state_2" label="State 2">
<option value="3">District 3</option>
</optgroup>
<optgroup id="state_3" label="State 3">
<option value="4">District 4</option>
<option value="5">District 5</option>
<option value="6">District 6</option>
</optgroup>
</select>
City:
<select name="city" id="city">
<option value="0"></option>
<optgroup id="district_1" label="District 1">
<option value="1">City 1</option>
<option value="2">City 2</option>
<option value="3">City 3</option>
</optgroup>
<optgroup id="district_2" label="District 2">
<option value="4">City 4</option>
<option value="5">City 5</option>
</optgroup>
<optgroup id="district_3" label="District 3">
<option value="6">City 6</option>
<option value="7">City 7</option>
</optgroup>
</select>
</body>
</html>
Related
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>
My html code:
<select class="sss" size="3">
<option value="1">value 1</option>
<option value="2">value 2</option>
<option value="3">value 3</option>
<option value="4">value 4</option>
<option value="5">value 5</option>
<option value="6">value 6</option>
<select>
and jquery code:
var $s = $('.sss');
var optionTop = $s.find('[value="3"]').offset().top;
var selectTop = $s.offset().top;
$s.scrollTop($s.scrollTop() + (optionTop - selectTop));
it is possible for me in jquery . (DEMO)
but I want to solve that in javascript. Is it possible?
I have solved that: following ans:
var s = document.getElementById("aa");
var optionTop = s.querySelector('option[value="2"]').offsetTop;
var selectTop = s.offsetTop;
s.scrollTop = s.scrollTop + (optionTop - selectTop);
<select id="aa" size="3">
<option value="1">value 1</option>
<option value="2">value 2</option>
<option value="3">value 3</option>
<option value="4">value 4</option>
<option value="5">value 5</option>
<option value="6">value 6</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>
I need help with a dilemma. I have no idea how to solve this problem. I need to sort all select boxes on a webpage alphabetically (a, b, c, d,...) by option groups (<optgroup>), then sort the options in each option group alphabetically, without taking them out of their respective group.
I need this to happen by calling the selectbox's ID, after it is loaded. Preferably, in pure JavaScript, but if that's not possible, JQuery can be used instead.
Can you handle this? If so, please help steer me in the right direction.
Thanks in Advance!
-James A.
The concept is the same as what I referenced in my comment above. See the function orderOptgroups below:
$(document).ready(function() {
orderOptgroups();
});
function orderOptgroups() {
$("select").each(function() {
var $select = $(this);
var $groups = $select.find("optgroup");
$groups.remove();
$groups = $groups.sort(function(g1, g2) {
return g1.label.localeCompare(g2.label);
});
$select.append($groups);
$groups.each(function() {
var $group = $(this);
var options = $group.find("option");
options.remove();
options = options.sort(function(a, b) {
return a.innerHTML.localeCompare(b.innerHTML);
});
$group.append(options);
});
});
}
select {
width:100px;
height:250px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select multiple="multiple">
<optgroup label="Group 2">
<option value="value11">Label C</option>
<option value="value21">Label A</option>
<option value="value31">Label B</option>
</optgroup>
<optgroup label="Group 3">
<option value="value12">Label F</option>
<option value="value22">Label D</option>
<option value="value32">Label E</option>
</optgroup>
<optgroup label="Group 1">
<option value="value13">Label X</option>
<option value="value23">Label Y</option>
<option value="value33">Label Z</option>
</optgroup>
</select>
<select multiple="multiple">
<optgroup label="Group C">
<option value="value11">Label 9</option>
<option value="value21">Label 8</option>
<option value="value31">Label 7</option>
</optgroup>
<optgroup label="Group B">
<option value="value12">Label 5</option>
<option value="value22">Label 6</option>
<option value="value32">Label 4</option>
</optgroup>
<optgroup label="Group A">
<option value="value13">Label 3</option>
<option value="value23">Label 1</option>
<option value="value33">Label 2</option>
</optgroup>
</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])}