i want to make a multi selection one is depend to another.
when i select fruit then it show three option banana orange aple then select banbana it show another option red orange yellow.But problem show in red orege yellow so third type i face problem
<html>
<head>
</head>
</body>
<select name="select1" id="select1">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select name="select2" id="select2">
<option value=""></option>
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>
// here is my problem
<select name="select3" id="select3">
<option value=""></option>
<option value="1">red</option>
<option value="1">orange</option>
<option value="1">yellow</option>
<option value="2">white</option>
<option value="2">gray</option>
<option value="2">blue</option>
<option value="3">ash</option>
<option value="3">silver</option>
<option value="4">gold<option>
</select>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/function.js"></script>
<script type="text/javascript">
$("#select1").change(function() {
if($(this).data('options') == undefined){
/*Taking an array of all options-2 and kind of embedding it on the select1*/
$(this).data('options',$('#select2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
});
$("#select2").change(function() {
if($(this).data('options') == undefined){
/*Taking an array of all options-2 and kind of embedding it on the select1*/
$(this).data('options',$('#select3 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select3').html(options);
});
</script>
</body>
</html>
$("#select1").change(function() {
if ($(this).data('options') == undefined) {
/*Taking an array of all options-2 and kind of embedding it on the select1*/
$(this).data('options', $('#select2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
});
$("#select2").change(function() {
if ($(this).data('options') == undefined) {
/*Taking an array of all options-2 and kind of embedding it on the select1*/
$(this).data('options', $('#select3 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value1=' + id + ']');
$('#select3').html(options);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select1" id="select1">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select name="select2" id="select2">
<option value1 = "1" value=""></option>
<option value1 = "1" value="1">Banana</option>
<option value1 = "1" value="1">Apple</option>
<option value1 = "2" value="1">Orange</option>
<option value1 = "2" value="2">Wolf</option>
<option value1 = "2" value="2">Fox</option>
<option value1 = "3" value="2">Bear</option>
<option value1 = "3" value="3">Eagle</option>
<option value1 = "4" value="3">Hawk</option>
<option value1 = "4" value="4">BWM<option>
</select>
<select name="select3" id="select3">
<option value1 = "1" value=""></option>
<option value1 = "1" value="1">red</option>
<option value1 = "1" value="1">orange</option>
<option value1 = "2" value="1">yellow</option>
<option value1 = "2" value="2">white</option>
<option value1 = "2" value="2">gray</option>
<option value1 = "3" value="2">blue</option>
<option value1 = "3" value="3">ash</option>
<option value1 = "4" value="3">silver</option>
<option value1 = "4" value="4">gold<option>
</select>
Related
Thanks to lvoely people on this website, I am slowly getting this script to work as I intended. One thing I couldn't figure out is
how to get "State" (select2) to show "Select State" instead straight to options when Country (Select 1) is selected and, simililarly, ""City" to show "Select City" instead of straight to options when "State" (Select2) is selected).
how to make City (select3) to show "Select City" when previously selected "State" (select2) is unselected or changed to another State. Likewise for "State" when previously selected "Country" is unselected or changed to another Country (also for City to change to "Select City" when this happens)
$(function() {
$("#select1").change(function() {
if ($(this).data('options') == undefined) {
$(this).data('options', $('#select2 option').clone());
}
var id = $(this).val();
if (id == "") {
$('#select2').val('');
$('#select3').val('');
return;
}
var options = $(this).data('options').filter('[data-value=' + id + ']');
$('#select2').html(options).show();
});
$("#select2").change(function() {
if ($(this).data('options') == undefined) {
$(this).data('options', $('#select3 option').clone());
}
var id = $(this).val();
if (id == "") {
$('#select3').val('');
return;
}
var options = $(this).data('options').filter('[data-value=' + id + ']');
$('#select3').html(options).show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="select1" id="select1">
<option value="">Select Country</option>
<option value="india">India</option>
<option value="america">America</option>
</select>
<select name="select2" id="select2" style="inline">
<option value="">Select State</option>
<option data-value="india" value="orissa">Orissa</option>
<option data-value="india" value="telangan">Telangan</option>
<option data-value="america" value="usa">USA</option>
<option data-value="america" value="america">California</option>
</select>
<select name="select3" id="select3" style="inline">
<option value="">Select city</option>
<option data-value="orissa">Nal</option>
<option data-value="orissa">Mir</option>
<option data-value="telangan">Hyd</option>
<option data-value="telangan">Vija</option>
<option data-value="usa">ttt</option>
<option data-value="usa">ttt</option>
<option data-value="america">KRK</option>
<option data-value="america">MRK</option>
</select>
The lines
var options = $(this).data('options').filter('[data-value=' + id + ']');
$('#select2').html(options).show();
remove all options and replace them with only the ones that match the filter - obviously(?) the "please select" (value="") option does not match, so is not included.
You could adjust your filter to include it, or add the blank option to the select after.
$(function() {
$("#select1").change(function() {
if ($(this).data('options') == undefined) {
$(this).data('options', $('#select2 option').clone());
}
var id = $(this).val();
if (id == "") {
$('#select2').val('');
$('#select3').val('');
return;
}
var options = $(this).data('options').filter('[data-value=' + id + '],[value=""]');
$('#select2').html(options).show();
});
$("#select2").change(function() {
if ($(this).data('options') == undefined) {
$(this).data('options', $('#select3 option').clone());
}
var id = $(this).val();
if (id == "") {
$('#select3').val('');
return;
}
var options = $(this).data('options').filter('[data-value=' + id + '],[value=""]');
$('#select3').html(options).show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="select1" id="select1">
<option value="">Select Country</option>
<option value="india">India</option>
<option value="america">America</option>
</select>
<select name="select2" id="select2" style="inline">
<option value="">Select State</option>
<option data-value="india" value="orissa">Orissa</option>
<option data-value="india" value="telangan">Telangan</option>
<option data-value="america" value="usa">USA</option>
<option data-value="america" value="america">California</option>
</select>
<select name="select3" id="select3" style="inline">
<option value="">Select city</option>
<option data-value="orissa">Nal</option>
<option data-value="orissa">Mir</option>
<option data-value="telangan">Hyd</option>
<option data-value="telangan">Vija</option>
<option data-value="usa">ttt</option>
<option data-value="usa">ttt</option>
<option data-value="america">KRK</option>
<option data-value="america">MRK</option>
</select>
Refactored for easier calls
$(function() {
init();
reset("#select1", "#select2");
reset("#select1", "#select3");
$("#select1").change(function() {
var value = $(this).val();
if (value == "") {
reset("#select1", "#select2");
reset("#select1", "#select3");
}
else {
set("#select2", value);
reset("#select2", "#select3");
}
});
$("#select2").change(function() {
var value = $(this).val();
if (value == "") {
reset("#select2", "#select3");
}
else {
set("#select3", value);
}
});
function init() {
$("select").each(function() {
$(this).data('options', $(this).find('option').clone());
});
}
function reset(parent, child) {
var opts = $(parent).data("options").filter('[value=""]');
$(child).html(opts.clone());
}
function set(select, value) {
var options = $(select).data('options').filter(`[data-value='${value}'],[value=""]`);
$(select).html(options.clone()).show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="select1" id="select1">
<option value="">Select Country</option>
<option value="india">India</option>
<option value="america">America</option>
</select>
<select name="select2" id="select2" style="inline">
<option value="">Select State</option>
<option data-value="india" value="orissa">Orissa</option>
<option data-value="india" value="telangan">Telangan</option>
<option data-value="america" value="usa">USA</option>
<option data-value="america" value="america">California</option>
</select>
<select name="select3" id="select3" style="inline">
<option value="">Select city</option>
<option data-value="orissa">Nal</option>
<option data-value="orissa">Mir</option>
<option data-value="telangan">Hyd</option>
<option data-value="telangan">Vija</option>
<option data-value="usa">ttt</option>
<option data-value="usa">ttt</option>
<option data-value="america">KRK</option>
<option data-value="america">MRK</option>
</select>
I followed this guide: Use jQuery to change a second select list based on the first select list option
And I always get every single one of the options in the second list no matter what I pick in the first one. Here is my code:
<html>
<title>
Deity's Database: Legend of Zelda fandom
</title>
<head>
<script>
//Sort races via era
$("#eras").change(function() {
if ($(this).data('options') === undefined) {
/*Taking an array of all options-2 and kind of embedding it on the select1*/
$(this).data('options', $('#races option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#races').html(options);
});
</script>
</head>
<script src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
What Era?
<select name="eras" id="eras" size="1">
<option value="blank_era" selected>Choose one</option>
<option value="ocarina">Ocarina of Time, Majora's Mask</option>
<option value="twilight">Twilight Princess</option>
<option value="toon">Wind Waker, Phantom Hourglass, Spirit Tracks</option>
<option value="sky">Skyward Sword</option>
<option value="four">Minish Cap, Four Swords, Four Swords Adventures</option>
</select>
<p>
What Race?
<select name="races" id="races" size="1">
<option value="blank_race" selected>Choose one</option>
<option value="ocarina">Hylian</option>
<option value="ocarina">Terminian</option>
<option value="ocarina">Sheikah</option>
<option value="ocarina">Kokiri</option>
<option value="ocarina">Gerudo</option>
<option value="ocarina">Goron</option>
<option value="ocarina">Zora</option>
<option value="ocarina">Deku</option>
<option value="ocarina">Fairy</option>
<option value="twilight">Hylian</option>
<option value="twilight">Human</option>
<option value="twilight">Twili</option>
<option value="twilight">Goron</option>
<option value="twilight">Zora</option>
<option value="twilight">Yeti</option>
<option value="twilight">Oocca</option>
<option value="twilight">Fairy</option>
<option value="toon">Hylian</option>
<option value="toon">Human</option>
<option value="toon">Rito</option>
<option value="toon">Korok</option>
<option value="toon">Goron</option>
<option value="toon">Lokomo</option>
<option value="toon">Anouki</option>
<option value="toon">Fairy</option>
<option value="sky">Skyloftian</option>
<option value="sky">Demon</option>
<option value="sky">Goron</option>
<option value="sky">Kikwi</option>
<option value="sky">Parella</option>
<option value="sky">Mogma</option>
<option value="sky">Robot</option>
<option value="four">Hylian</option>
<option value="four">Minish</option>
<option value="four">Fairy</option>
</select>
</html>
I'd like it to just display the options for that certain value but I get this:
click here
Sorry for the photo of the screen, I couldn't screenshot when the second list was displaying options.
Your jQuery code is requiring the jQuery library. In your code, first ran the code and after, called the jQuery library.
You need to run jQuery code when the DOM is ready in the browser. You should use:
$(document).ready(function()
{
// Code...
});
Or the jQuery short-hand:
$(function()
{
// Code...
});
I'd like to recommend to use the W3C Markup Validation Service just to help you write a good markup.
This the correct HTML5 markup.
<!DOCTYPE html>
<html>
<head>
<title>
Deity's Database: Legend of Zelda fandom
</title>
<script src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function() {
//Sort races via era
$("#eras").change(function() {
if ($(this).data('options') === undefined) {
/*Taking an array of all options-2 and kind of embedding it on the select1*/
$(this).data('options', $('#races option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#races').html(options);
});
});
</script>
</head>
<body>
<p>
What Era?
<select name="eras" id="eras" size="1">
<option value="blank_era" selected>Choose one</option>
<option value="ocarina">Ocarina of Time, Majora's Mask</option>
<option value="twilight">Twilight Princess</option>
<option value="toon">Wind Waker, Phantom Hourglass, Spirit Tracks</option>
<option value="sky">Skyward Sword</option>
<option value="four">Minish Cap, Four Swords, Four Swords Adventures</option>
</select>
</p>
<p>
What Race?
<select name="races" id="races" size="1">
<option value="blank_race" selected>Choose one</option>
<option value="ocarina">Hylian</option>
<option value="ocarina">Terminian</option>
<option value="ocarina">Sheikah</option>
<option value="ocarina">Kokiri</option>
<option value="ocarina">Gerudo</option>
<option value="ocarina">Goron</option>
<option value="ocarina">Zora</option>
<option value="ocarina">Deku</option>
<option value="ocarina">Fairy</option>
<option value="twilight">Hylian</option>
<option value="twilight">Human</option>
<option value="twilight">Twili</option>
<option value="twilight">Goron</option>
<option value="twilight">Zora</option>
<option value="twilight">Yeti</option>
<option value="twilight">Oocca</option>
<option value="twilight">Fairy</option>
<option value="toon">Hylian</option>
<option value="toon">Human</option>
<option value="toon">Rito</option>
<option value="toon">Korok</option>
<option value="toon">Goron</option>
<option value="toon">Lokomo</option>
<option value="toon">Anouki</option>
<option value="toon">Fairy</option>
<option value="sky">Skyloftian</option>
<option value="sky">Demon</option>
<option value="sky">Goron</option>
<option value="sky">Kikwi</option>
<option value="sky">Parella</option>
<option value="sky">Mogma</option>
<option value="sky">Robot</option>
<option value="four">Hylian</option>
<option value="four">Minish</option>
<option value="four">Fairy</option>
</select>
</p>
</body>
</html>
Hope this helps.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select name="select1" id="select1">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select name="select2" id="select2">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>
$("#select1").change(function() {
if ($(this).data('options') === undefined) {
$(this).data('options', $('#select2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
});
I have two drop downs dependent on each other.
When I'm selecting the FRUIT, I want to show only one Apple value from select2 and hide all the others but when I'm selecting Animal I want to show all the values
Please help me write the Javascript function.
Thanks.
<select name="select1" id="select1">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select name="select2" id="select2">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>
//This is my java script function
function display(){
var access=document.getElementById("select1");
var list = document.getElementById("select2");
var selectlist=access[access.selectedIndex].value;
if(selectlist="APPLE"){
list.style.visiblity="hidden";
}else{
list.style.visiblity="block";
}
FIDDLE
//Add eventlistener for change-event
document.getElementById("selCategory").addEventListener("change", filter, false);
//Filter function which will filter on selected value from first select.
function filter()
{
var cat = document.getElementById("selCategory");
var opt = document.getElementById("selOptions");
var selectedValue = cat.options[cat.selectedIndex].value;
var firstEl = false;
var firstIndex = 0;
for(var i = 0; i < opt.options.length; i++)
{
if(opt.options[i].value !== selectedValue)
{
opt.options[i].style.display = "none";
}
else
{
opt.options[i].style.display = "block";
if(!firstEl)
{
firstIndex = i;
firstEl = true;
}
}
}
opt.value = opt.options[firstIndex].value;
}
//Execute on first load, second select is filtered from the start.
filter();
<select name="category" id="selCategory">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select name="options" id="selOptions">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>
i am having two multi select dropdowns. those two dropdowns will have the same set of options (like monday, tuesday ,wednesday). now i want to have a validation where in one dropdown of these selected to some options(these are multi select dropdowns.), then the same options should not be available to select from the other dropdown.(means those should be disable.) here for multi select i am using one UI js plugin multi select dropdown javascript plugin.
<label for="shift_day_list_1">Day</label>
<input name="shift[day_list_1][]" type="hidden" value="" /><select class="form-control" id="day_list_1" multiple="multiple" name="shift[day_list_1][]"><option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option></select>
<label for="shift_day_list_2">Day</label>
<input name="shift[day_list_2][]" type="hidden" value="" /><select class="form-control" id="day_list_2" multiple="multiple" name="shift[day_list_2][]"><option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option></select>
this is my js code:
$(document).ready(function() {
$('#day_list_1').SumoSelect({
placeholder: 'Select Days',
csvDispCount: 3
});
$('#day_list_2').SumoSelect({
placeholder: 'Select Days',
csvDispCount: 3
});
});
how to implement this? please help me?
I've created a full commented snippet for you:
// when all the elements in the DOM are loaded
document.addEventListener('DOMContentLoaded', function() {
// get both lists and their HTMLOptionElement nodes
var list1 = document.getElementById('day_list_1'),
list2 = document.getElementById('day_list_2'),
options1 = list1.querySelectorAll('option'),
options2 = list2.querySelectorAll('option');
// add event handlers when the lists are changed to call the update function
$(list1).change(update).SumoSelect();
$(list2).change(update).SumoSelect();
function update(e) {
// when the lists are changed, loop through their HTMLOptionElement nodes
var other = (list1 === this) ? list2 : list1;
for (var i = 0; i < options1.length; i++) {
// options of list1 should be disabled if selected in list2 and vice-versa
this[i].selected ? other.sumo.disableItem(i) : other[i].selected ? void 0 : other.sumo.enableItem(i);
}
}
});
.form-control {
width: 130px;
height: 130px;
}
<link href="http://hemantnegi.github.io/jquery.sumoselect/stylesheets/sumoselect.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://hemantnegi.github.io/jquery.sumoselect/javascripts/jquery.sumoselect.min.js"></script>
<select class="form-control" id="day_list_1" multiple="multiple" name="shift[day_list_1][]">
<option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
</select>
<select class="form-control" id="day_list_2" multiple="multiple" name="shift[day_list_2][]">
<option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
</select>
you can use normal js to achieve this.Use this following code on day_list_1 on onChange event.
document.getElementById("day_list_2").options[document.getElementById("day_list_1").selectedIndex].disabled = true;
Take a look at this jsfiddle
Click here for jsfiddle example
$("#theSelect option[value=" + value + "]").attr('disabled', 'disabled');
But before this, you need to add change event to the first select/dropdownlist. I hope you can take from here..
Try this:
$('#day_list_1').on('change', function() {
$('#day_list_2').find('option').removeProp('disabled');
var val = $(this).val() || [];
val.forEach(function(item) {
$('#day_list_2').find('[value=' + item + ']').prop('disabled', 'disabled');
});
});
$('#day_list_2').on('change', function() {
$('#day_list_1').find('option').removeProp('disabled');
var val = $(this).val() || [];
val.forEach(function(item) {
$('#day_list_1').find('[value=' + item + ']').prop('disabled', 'disabled');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label for="day_list_1">Day</label>
<input type="hidden" value="" />
<select class="form-control" id="day_list_1" multiple="multiple" name="shift[day_list_1][]">
<option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
</select>
<label for="day_list_2">Day</label>
<input type="hidden" value="" />
<select class="form-control" id="day_list_2" multiple="multiple" name="shift[day_list_1][]">
<option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
</select>
First you have to change the id of "day_list_1", because as per HTML standard there is only one id in the entire HTML of any tag.
So you should do like this :
First one :
<select class="form-control" id="day_list_1" multiple="multiple"
name="shift[day_list_1][]">
Next one:
<select class="form-control" id="day_list_2" multiple="multiple" name="shift[day_list_1][]">
Code for validation :
function validate(){
var error = false;
var selected_val_1 = [];
$('#day_list_1 :selected').each(function(i, selected){
selected_val_1[i] = $(selected).text();
});
var selected_val_2 = [];
$('#day_list_2 :selected').each(function(i, selected){
selected_val_2[i] = $(selected).text();
});
$.each(selected_val_1, function( index, value ) {
if($.inArray(value, selected_val_2) != -1){
error = true;
}
});
$.each(selected_val_2, function( index, value ) {
if($.inArray(value, selected_val_1) != -1){
error = true;
}
});
if(error == true){
return true;
}else{
return false;
}
}
I hope it helps you . If you have any query regarding this logic then you can revert me .
Thanks.
It will work fine for 3 drop downs also
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
var $dropdown1 = $("select[name='project_manager[]']");
var $dropdown2 = $("select[name='test_engineer[]']");
var $dropdown3 = $("select[name='viewer[]']");
$dropdown1.change(function() {
$dropdown2.empty().append($dropdown1.find('option').clone());
$dropdown3.empty().append($dropdown2.find('option').clone());
var selectedItem = $(this).val();
if (selectedItem) {
$(selectedItem).each(function(v,selectedItem) {
$dropdown2.find('option[value="' + selectedItem + '"]').prop('disabled', true);
$dropdown3.find('option[value="' + selectedItem + '"]').prop('disabled', true);
});
}
});
$dropdown2.change(function() {
$dropdown3.empty().append($dropdown2.find('option').clone());
var selectedItem = $(this).val();
if (selectedItem) {
$(selectedItem).each(function(v,selectedItem) {
$dropdown3.find('option[value="' + selectedItem + '"]').prop('disabled', true);
});
}
});
});
</script>
</head>
<body>
<select id="project_manager" name="project_manager[]" multiple="multiple">
<option></option>
<option id="option" value="1">Test 1</option>
<option id="option" value="2">Test 2</option>
<option id="option" value="3">Test 3</option>
</select>
<select id="test_engineer" name="test_engineer[]" multiple="multiple" >
<option></option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
<select name="viewer[]" multiple="multiple">
<option></option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "vrLr9wyg"
}], "*")
}
</script>
</body>
</html>
The filtering is working but i need to impliment the select all with this two select dropdown.
I need is the two select dropdown have a select all.
HTML:
<select name="select1" id="select1">
<option Value="">All</option>
<option Value="2013-10-10">2013-10-10</option>
<option Value="2013-10-09">2013-10-09</option>
<option Value="Onion">Onion</option>
<option Value="Wewe">Wewe</option>
</select>
<select name="select2" id="select2">
<option Value="2013-10-10">2013-10-10 Style 1</option>
<option Value="2013-10-10">2013-10-10 Style 2</option>
<option Value="2013-10-10">2013-10-10 Style 3</option>
<option Value="2013-10-09">2013-10-09 Style 1</option>
<option Value="2013-10-09">2013-10-09 Style 2</option>
<option Value="2013-10-09">2013-10-09 Style 3</option>
<option Value="Orange">Orange Style 4</option>
<option Value="Onion">Onion Style 1</option>
<option Value="Onion">Onion Style 2</option>
<option Value="Wewe">wewe Style 2</option>
</select>
JavaScript:
$("#select1").change(function() {
if($(this).data('options') == undefined){
/*Taking an array of all options-2 and kind of embedding it on the select1*/
$(this).data('options',$('#select2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
});
Demo: http://jsfiddle.net/fRuhn/520/
$("#select1").change(function() {
if($(this).data('options') == undefined){
/*Taking an array of all options-2 and kind of embedding it on the select1*/
$(this).data('options',$('#select2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter(function() {
return (id === '') || id === $(this).val();
});
$('#select2').html(options);
$('#select2').val($('#select2 option:first').val());
});