How to implement three select boxes and handle selection with JavaScript? - javascript

I need to implement 3 select boxes on a page wherein the value selected in one box should not appear on the next select boxes. Can I have detailed explaination to this with code? A newbie in JS. Let me know if this can be done with PHP too. Thanks in advance.
Here goes the sample code.. Let me know why its not taking the JS script:
<html>
<head>
<title>check</title>
<body>
<select name="name[]" class="select">
<option value="">Select</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select name="name[]" class="select">
<option value="">Select</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select name="name[]" class="select">
<option value="">Select</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<script>
$('select').change(function() {
var myOpt = [];
$("select").each(function () {
myOpt.push($(this).val());
});
$("select").each(function () {
$(this).find("option").prop('hidden', false);
var sel = $(this);
$.each(myOpt, function(key, value) {
if((value != "") && (value != sel.val())) {
sel.find("option").filter('[value="' + value +'"]').prop('hidden', true);
}
});
});
});
</script>
</body>
</head>
</html>

Hope this answer will solve your query:
$('select').change(function() {
var val = $(this).val();
$("select").not(this).each(function(index, item) {
$(item).find("option[value='" + val + "']").remove();
});
});
Or you can go through to jsfiddle link for live demo.

Why dont you just use multiple select box?
<select multiple name="name[]" class="select">
<option value="">Select</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

Related

remove option once is selected from many select tag

I've some selected input, that have the same options.
same class, different id for each select.
I've a function "onChange" event of each select, that give me the option selected.
How can I remove then this value from all the others select, without removing it where is selected, and how to revert it if is "de-selected".
many thanks
the code:
-if option two is selected, id like to remove it from all select but not where is selected-
[..........on same div....]
<select onchange="getval(this);" class="optionRisp form-control" id="select_1_1" style="">
<option value="">choose one node or leaf</option>
<option value="2">2</option>
</select>
<select onchange="getval(this);" class="optionRisp form-control" id="select_2_1" style="">
<option value="">choose one node or leaf</option>
<option value="2">2</option>
</select>
[..........on others div....]
<select onchange="getval(this);" class="optionRisp form-control" id="select_1_2" style="">
<option value="">choose one node or leaf</option>
<option value="2">2</option>
</select>
<scirp>
function getval(sel)
{
//remove option from list due selection
//sel is the element just selected!
}
</scirp>
You have to get all the selected values and store it on an array. Then you can use filter to hide those in array using includes
And i used jQuery $("select").change(.. coz it easier. :)
$(document).ready(function() {
$("body").on('change', '.optionRisp', function() {
var val = [];
//Get all selected
$('.optionRisp option:selected').each(function() {
if ($(this).val() != "") val.push($(this).val());
});
//Hide Selected
if ( $(this).val() != "" ) {
$(".optionRisp").not(this).find("option").show().filter(function() {
return $(this).val() != "" && val.includes($(this).val()) ? true : false;
}).hide();
} else {
$(".optionRisp").find("option").show().filter(function() {
return $(this).val() != "" && val.includes($(this).val()) ? true : false;
}).hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="optionRisp form-control">
<option value=""></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select class="optionRisp form-control">
<option value=""></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select class="optionRisp form-control">
<option value=""></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

Select all option if item-all was selected

I have something like this:
<select multiple>
<option value="all-item" selected>All</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
What I need:
After init only "All" is selected (done).
If the customer selected other options, "all-items" should be unselected.
If the customer has select e.q 2 options and after that will select "all-item", an only first option should be select and another should be unselected.
I tried to do it like that:
$("#all-item").on('focus', function() {
$("#selecty option").each(function(){
$(this).attr("selected", "selected");
});
});
<select multiple>
<option value="all-item" selected>All</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
but doesn't work.
Anybody can help?
I made it with vanilla JS, because you don't need JQuery for that :
function handleChange(element) {
if(element.value === 'all-item') {
const options = [...element.options];
for (let opt of options) {
if (opt.value !== '' && opt.value != 'all-item') { opt.selected = true; }
else { opt.selected = false; }
}
}
}
option {
padding: 12px;
}
<select id="select" multiple onchange="handleChange(this)">
<option value="">Chose an option</option>
<option value="all-item">All</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
EDIT
To unselect every other option :
function handleChange(element) {
if(element.value === 'all-item') {
const options = [...element.options];
for (let opt of options) {
if (opt.value === 'all-item') { opt.selected = true; }
else { opt.selected = false; }
}
}
}
option {
padding: 12px;
}
<select id="select" multiple onchange="handleChange(this)">
<option value="">Chose an option</option>
<option value="all-item">All</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
You can simply check if all-item is selected with .is(':selected') when the user selects anything, and unselect anything else with .attr('selected',false) :
$('select').on('change',function(){
if($('option[value="all-item"]',this).is(':selected')){
$('option:not([value="all-item"])',this).attr('selected',false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple>
<option value="all-item" selected>All</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

Alert when selecting some particular value from drop down in JavaScript

Below are the dropdown data..
<select size="1" name="Test_Data">
<option selected value="Select One">Select One</option>
<option value="Data1">IN-Data1</option>
<option value="Data2">IN-Data2</option>
<option value="Data3">IN-Data3</option>
<option value="Data4">AUS-Data4</option>
<option value="Data5">AUS-Data5</option>
<option value="Data6">US-Data6</option>
<option value="Data7">US-Data7</option>
I want to get alert/pop up when I select the data which is start from IN in drop down list.
Try this:
https://jsfiddle.net/mminetto/bggwnkwj/
var select = $('select[name="Test_Data"]');
select.on('change', function(){
var options = select.children('option:selected');
if(options.length > 0 && options[0].innerText.startsWith("IN")){
alert(this.value);
alert(options[0].innerText);
}
});
<select size="1" name="Test_Data" id="dropdown">
<option selected value="Select One">Select One</option>
<option value="Data1">IN-Data1</option>
<option value="Data2">IN-Data2</option>
<option value="Data3">IN-Data3</option>
<option value="Data4">AUS-Data4</option>
<option value="Data5">AUS-Data5</option>
<option value="Data6">US-Data6</option>
<option value="Data7">US-Data7</option>
in javascript
<script>
$("#dropdown").change(function(){
if($(this).find("option:selected").text().startsWith("IN")){
alert("option with IN selected =>"+$(this).find("option:selected").text());
}
});
</script>
Try this code
HTML
<select size="1" onChange="showAlert()" id="dataCountry" name="Test_Data">
<option selected value="Select One">Select One</option>
<option value="Data1">IN-Data1</option>
<option value="Data2">IN-Data2</option>
<option value="Data3">IN-Data3</option>
<option value="Data4">AUS-Data4</option>
<option value="Data5">AUS-Data5</option>
<option value="Data6">US-Data6</option>
<option value="Data7">US-Data7</option>
</select>
JavaScript
<script>
function showAlert() {
var el = document.getElementById('dataCountry'); // get the index
var text = el.options[el.selectedIndex].innerHTML; // get the label
var n = text.search("IN"); //search number of IN
if(n>=0) {
alert(text);
}
}
</script>

update list of <select> from another <select multiple> using jquery

I am trying to update a <select> element when I select one or multiple values from another <select multiple> using jQuery. Here's my multiple select:
<select class="form-control" multiple>
<option value="1">company 1</option>
<option value="2">company 2</option>
<option value="3">company 3</option>
<option value="4">company 4</option>
</select>
I hope this is what you are looking for,
$('select#first').change(function() {
$("select#second option:not(:first-child)").remove();
$(this).find("option:selected").each(function() {
$("select#second").append($(this).clone());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="first" class="form-control" multiple>
<option value="1">company 1</option>
<option value="2">company 2</option>
<option value="3">company 3</option>
<option value="4">company 4</option>
</select>
<select name="second" id="second">
<option value=''>Select 2</select>
</select>
Check this script https://jsfiddle.net/gpb5wx8h/5/
Jquery:
function chooseItems(item, placeholder){
$(item).change(function() {
var item = $(this);
console.log(typeof(item.val()));
if(typeof item.val() == 'object'){
$.each(item.val(), function(i,v){
var selectedItem = item.find('option[value="'+ v +'"]'),
selectedText = selectedItem.text();
selectedItem.detach();
$(placeholder).append('<option value="' + v +'">' + selectedText + '</option>')
})
}
})
}
$(document).ready(function() {
chooseItems('.choose-role','.placeholder-role');
chooseItems('.placeholder-role','.choose-role');
})
HTML:
<select class="form-control choose-role" multiple>
<option value="1">company 1</option>
<option value="2">company 2</option>
<option value="3">company 3</option>
<option value="4">company 4</option>
</select>
<select class="form-control placeholder-role" multiple>
</select>
If you want to update select options by fetching data from the server end regarding the selected values in multiple select box then you can perform ajax operation and insert the result to the another select box which is to be updated.

Selecting the last value from the dropdown and disable it for other dropdowns

I have 3 drop-downs with values: Select, One, Two, Three and following is the HTML.
<select class="dpdown" id="box1">
<option value="Select">Select</option>
<option value="One">One</option>
<option value="Two">Tow</option>
<option value="Three">Three</option>
</select>
<select class="dpdown" id="box2">
<option value="Select">Select</option>
<option value="One">One</option>
<option value="Two">Tow</option>
<option value="Three">Three</option>
</select>
<select class="dpdown" id="box3">
<option value="Select">Select</option>
<option value="One">One</option>
<option value="Two">Tow</option>
<option value="Three">Three</option>
</select>
Conditions
First of all the jQuery function should store the current values from all the boxes.
If the user select One from #box1, then it (One) should be disabled from all other boxes, and if Two is selected from #box1 again, then Two is disabled from other boxes and One gets enabled. i.e. the last value is disabled not all the values.
Also to be noted that the user can select from any of the dropdowns whether it is box1/box2 or box3.
EDIT
$(document).ready(function(){
$('#box1').data('pre', $(this).val()); // added this line to get the pre value.
$("select").change(function(e){
var id = $(this).attr("id");
var before_change = $(this).data('pre');
alert(before_change); // alert shows blank values
});
});
I want to do this with jQuery. Please help.
Like this:
$(".dpdown").on("change", function() {
var sel = $(this).val();
$(".dpdown").find("option").prop("disabled", false);
$(".dpdown").not(this).find("option[value='" + sel + "']").prop("disabled", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="dpdown" id="box1">
<option value="Select">Select</option>
<option value="One">One</option>
<option value="Two">Tow</option>
<option value="Three">Three</option>
</select>
<select class="dpdown" id="box2">
<option value="Select">Select</option>
<option value="One">One</option>
<option value="Two">Tow</option>
<option value="Three">Three</option>
</select>
<select class="dpdown" id="box3">
<option value="Select">Select</option>
<option value="One">One</option>
<option value="Two">Tow</option>
<option value="Three">Three</option>
</select>
Try something like this:
var $selects = $('.dpdown').change(function() {
var val = $(this).val();
$selects
.children().prop('disabled', false)
.end().not(this)
.find('[value="' + val + '"]').prop('disabled', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="dpdown" id="box1">
<option value="Select">Select</option>
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
<select class="dpdown" id="box2">
<option value="Select">Select</option>
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
<select class="dpdown" id="box3">
<option value="Select">Select</option>
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
The idea is that you bind change event to all select boxes. Then when event happens you enable all options from all selectboxes, then you find option with matching value from other selects (other then current this) and disable them.
You code simple :
<script>
$('select').on('change', function() {
$("select option").removeAttr('disabled');
$("select option[value=" + $(this).val() + "]").attr('disabled','disabled')
});
</script>
DEMO
Try something like this:
UPDATED
var $selects = $(".dpdown").change(function() {
var selectedValues = [];
$.each($selects, function(index, select) {
var value = $(select).val();
if (value != "Select") {
selectedValues.push(value);
}
});
$selects
.find("option")
.prop("disabled", false);
$.each(selectedValues, function(index, value) {
$selects
.find("option[value='" + value +"']")
.not(":selected")
.prop("disabled", true);
});
});
Demo

Categories