Select all option if item-all was selected

Select all option if item-all was selected - javascript

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>

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>

'selected' attribute for options doesn't reset inside if else statement

I am trying to use an if else statement to add 'selected' to an option from the select menu. The only problem I have is that I'm not sure why once I go back to value 'top' option[1] is still 'selected'. It's like the first if doesn't execute the condition, although i see if i do the console log it does change to the first if...
<select id='selectdesign'>
<option value="0"></option>
<option value="top">top</option>
<option value="jeans">jeans</option>
</select>
<select id='selectmenu'>
<option value="0"></option>
<option value="1">top-blue</option>
<option value="2">top-pink</option>
<option value="3">bottoms-red</option>
<option value="4">bottoms-violet</option>
</select>
function selectOption(element) {
if (element.value == 'top') {
console.log('if');
option[2].setAttribute('selected', true);
} else if (element.value == 'jeans') {
console.log('else if');
option[1].setAttribute('selected', true);
}
}
i am calling the selectOption function on selectDesign on change

You need to access the right value of the select element, like
element.options[element.selectedIndex].value
and use
document.getElementById('selectmenu').selectedIndex = 1;
for setting an index of the options.
function selectOption(element) {
if (element.options[element.selectedIndex].value == 'top') {
document.getElementById('selectmenu').selectedIndex = 1;
} else if (element.options[element.selectedIndex].value == 'jeans') {
document.getElementById('selectmenu').selectedIndex = 3;
}
}
<select id="selectdesign" onchange="selectOption(this);">
<option value="0"></option>
<option value="top">top</option>
<option value="jeans">jeans</option>
</select>
<select id="selectmenu">
<option value="0"></option>
<option value="1">top-blue</option>
<option value="2">top-pink</option>
<option value="3">bottoms-red</option>
<option value="4">bottoms-violet</option>
</select>
Version with an object for preselecting options.
function selectOption(element) {
var indices = {
top: 1,
jeans: 3,
},
value = element.options[element.selectedIndex].value
if (value in indices) {
document.getElementById('selectmenu').selectedIndex = indices[value];
}
}
<select id="selectdesign" onchange="selectOption(this);">
<option value="0"></option>
<option value="top">top</option>
<option value="jeans">jeans</option>
</select>
<select id="selectmenu">
<option value="0"></option>
<option value="1">top-blue</option>
<option value="2">top-pink</option>
<option value="3">bottoms-red</option>
<option value="4">bottoms-violet</option>
</select>

Javascript auto select from dropdown

I'm searching and searching and can not find anything exactly what I need.
So I need javascript, that will select option from dropdown, but not by the option value number, but name.
I have:
<select class="aa" id="local" name="local">
<option value="0">Cała Polska</option>
<option value="1">Dolnośląskie</option>
<option value="100">• Bolesławiec</option>
<option value="101">• Dzierżoniów</option>
<option value="102">• Głogów</option>
<option value="103">• Góra</option>
<option value="104">• Jawor</option>
<option value="105">• Jelenia Góra</option>
So I need to select • Jawor by name, not by id - it's the most important. How do I make it work?

For you is it like;
var options = document.getElementsByClassName("aa")[0].options,
name ="Jawor";
for(i = 0; i < options.length; i++){
if(options[i].text.indexOf(name) > -1){
options[i].selected = true;
break;
}
}
<select class="aa" id="local" name="local">
<option value="0">Cała Polska</option>
<option value="1">Dolnośląskie</option>
<option value="100">• Bolesławiec</option>
<option value="101">• Dzierżoniów</option>
<option value="102">• Głogów</option>
<option value="103">• Góra</option>
<option value="104">• Jawor</option>
<option value="105">• Jelenia Góra</option>
</select>

U need to Use onChange Event Handler ... for example
<select onchange="showSelected()">
Then write your script ...
<script>
function showSelected(){
var s=document.getElementById('local'); //refers to that select with all options
var selectText=s.options[s.selectedIndex].text // takes the one which the user will select
alert(selectText) //Showing the text selected ...
}
</script>
Rest of your code is okay !
<select class="aa" id="local" name="local" onchange='showSelected'()>
<option value="0">Cała Polska</option>
<option value="1">Dolnośląskie</option>
<option value="100">• Bolesławiec</option>
<option value="101">• Dzierżoniów</option>
<option value="102">• Głogów</option>
<option value="103">• Góra</option>
<option value="104">• Jawor</option>
<option value="105">• Jelenia Góra</option>
</select>

Using jquery here. You can use the following function:
function selectFromDropdown(selector, text) {
$(selector).find('option').each(function() {
if ($(this).text() == text) {
$(selector).val($(this).val());
}
})
}
A demo:
function selectFromDropdown(selector, text) {
$(selector).find('option').each(function() {
if ($(this).text() == text) {
$(selector).val($(this).val());
return false;
}
})
}
//use the function
setTimeout(function() {
selectFromDropdown('#local', '• Dzierżoniów')
}, 1000)
setTimeout(function() {
selectFromDropdown('#local', '• Jawor')
}, 4000)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="aa" id="local" name="local">
<option value="">Select</option>
<option value="0">Cała Polska</option>
<option value="1">Dolnośląskie</option>
<option value="100">• Bolesławiec</option>
<option value="101">• Dzierżoniów</option>
<option value="102">• Głogów</option>
<option value="103">• Góra</option>
<option value="104">• Jawor</option>
<option value="105">• Jelenia Góra</option>
</select>

for chrome console use this
document.getElementById("id").selectedIndex = '3'; or
document.getElementById('id').value = 'BA';

How to implement three select boxes and handle selection with 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>

Hide/show the selected option on a secondary select

I have two <select> elements with different IDs.
When the user selects a value from the first select box, I want the second select box to only display connected values.
My code:
<select id="ExtraField_1" name="ExtraField_1">
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3">test3</option>
<option value="4">test4</option>
<option value="5">test5</option>
<option value="6">test6</option>
<option value="7">test7</option>
<option value="8">test8</option>
<option value="9">test9</option>
<option value="10">test10</option>
<option value="11">test11</option>
<option value="12">test12</option>
</select>
<select id="ExtraField_2" name="ExtraField_2">
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3">test3</option>
<option value="4">test4</option>
<option value="5">test5</option>
<option value="6">test6</option>
<option value="7">test7</option>
<option value="8">test8</option>
<option value="9">test9</option>
<option value="10">test10</option>
<option value="11">test11</option>
<option value="12">test12</option>
<option value="13">test13</option>
<option value="14">test14</option>
<option value="15">test15</option>
<option value="16">test16</option>
<option value="17">test17</option>
<option value="18">test18</option>
<option value="19">test19</option>
<option value="20">test20</option>
</select>
So when user selects "test1" from first select boxm he will see only "test2", "test3" and "test4" on the second select box; "test2" from first will show "test6", "test7" and "test8" in the second box.
How can I use JavaScript to resolve this problem?

If you can use jQuery then you can always just clear and append the options to the second select.
$('#ExtraField_1').change(function(){
$('#ExtraField_2').find('option').remove()
if($(this).val() == '1'){
$('#ExtraField_2').append($("<option </option>").attr('value','2').text('test2'));
$('#ExtraField_2').append($("<option></option>").attr('value','3').text('test3'));
$('#ExtraField_2').append($("<option></option>").attr('value','4').text('test4'));
}
if($(this).val() == '2'){
$('#ExtraField_2').append($("<option></option>").attr('value','5').text('test5'));
$('#ExtraField_2').append($("<option></option>").attr('value','6').text('test6'));
$('#ExtraField_2').append($("<option></option>").attr('value','7').text('test7'));
}
});

http://jsfiddle.net/8XVuv/2/
using only javascript is a bit more complicated but I would still take the same approach.
function createOption(otext,oValue){
var newOption = document.createElement('option');
newOption.text = otext;
newOption.value = oValue;
return newOption;
}
function clearSelect(theSelect){
for(var i = 0;i <= theSelect.options.length+1;i++)
{
theSelect.remove();
}
}
function onSelect(theSelect){
var nextSelect = document.getElementById('ExtraField_2');
clearSelect(nextSelect);
var selected = theSelect.options[theSelect.selectedIndex];
if(selected.value == 1){
nextSelect.add(createOption('test2','2'));
nextSelect.add(createOption('test3','3'));
nextSelect.add(createOption('test4','4'));
}
if(selected.value == 2){
nextSelect.add(createOption('test5','5'));
nextSelect.add(createOption('test6','6'));
nextSelect.add(createOption('test7','7'));
}
}
with html:
<select id="ExtraField_1" name="ExtraField_1" onchange="javascript: onSelect(this);" >
<option value="0">Select a test..</option>
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3">test3</option>
<option value="4">test4</option>
<option value="5">test5</option>
<option value="6">test6</option>
<option value="7">test7</option>
<option value="8">test8</option>
<option value="9">test9</option>
<option value="10">test10</option>
<option value="11">test11</option>
<option value="12">test12</option>
</select>
<select id="ExtraField_2" name="ExtraField_2">
<option value="0">Select from the left</option>
</select>
as you can see it still does what you expect but you are not hiding options.
http://jsfiddle.net/upKzW/13/

$('#ExtraField_1').change(function() {
$('#ExtraField_2').val(this.value);
});
http://jsfiddle.net/judearasu/rF8G6/

We Keep Coding

JavaScript is the programming language of the Web.

Select all option if item-all was selected - javascript

Related

remove option once is selected from many select tag

'selected' attribute for options doesn't reset inside if else statement

Javascript auto select from dropdown

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

Hide/show the selected option on a secondary select

Categories

Resources