Get all possible values of a select field - javascript

I have a select field with different values :
africa
europe
america
asia
oceania
When selecting a value, I want to add a css class to a specific div, the name of the css class being the value selected. Easy enough :
$(document).on("change", "[data-name='continent'] select", function () {
var continent = $('[data-name="continent"] select').val();
$("#mydiv").addClass(continent);
});
This works fine, but there is a problem : if I change the select field value, the previous classes will not be removed. I can't do :
$("#mydiv").removeClass().addClass(continent);
Because #mydiv already has other important classes.
I could do :
$("#mydiv").removeClass('africa').removeClass('europe').removeClass('america').removeClass('asia').removeClass('oceania').addClass(continent);
But in reality I have more than just 5 options and they might change in the future; I'd rather keep things flexible.
And more than anything, i want to learn javascript.
Is there any way to remove all the classes that are values of the select field ?

Try this:
$('#continent').on('change', (e) => {
let $myDiv = $('#myDiv'),
$continent = $(e.target),
possibleValues = $continent.find('option').toArray().map(item => item.value).join(' ');
$myDiv.removeClass(possibleValues).addClass($continent.val());
});
Explanation:
Gather all possible values from the select:
$continent.find('option').toArray().map(item => item.value)
Join them in a space-separated list into a string:
.join(' ');
Remove all classes from that list from the target element
$myDiv.removeClass(possibleValues)
Add the selected class after it.
Demo:
$('#continent').on('change', (e) => {
let $myDiv = $('#myDiv'),
$continent = $(e.target),
possibleValues = $continent.find('option').toArray().map(item => item.value).join(' ');
$myDiv.removeClass(possibleValues).addClass($continent.val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="continent">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
<option value="d">D</option>
<option value="e">E</option>
</select>
<div id="myDiv" class="other-class keep-me">my div</div>

To get a list of the classes you want to remove, you can use something like this:
[...testEl.querySelectorAll('option')].map(x => x.value).join(' ');
This is vanilla JavaScript...if done in jQuery it would look like this:
$('#my-select > option').map((i,el)=> el.value).toArray().join(' ');
That will pull out a list of the options and give you a space-delimited string. You could then use this list to do your .removeClass().
However I wonder if class is the best option for this. In the following snippet there is an example of using a data attribute instead of class, and how that data attribute could be used in a CSS selector (this would also work in jQuery or querySelector). Maybe an option to consider...
const testEl = document.querySelector('#test');
const allOptions = $('#test > option').map((i,el)=> el.value).toArray().join(' ');
console.log(allOptions);
const testChange = e => {
const el = e.target;
el.dataset.chosen = el.value;
};
testEl.addEventListener('change', testChange);
testChange({ target: testEl });
#test[data-chosen="africa"] {
color: red;
}
#test[data-chosen="america"] {
color: blue;
}
#test {
color: orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name='test' id='test' value='europe'>
<option value='africa'>africa</option>
<option value='europe'>europe</option>
<option value='america'>america</option>
<option value='asia'>asia</option>
<option value='oceania'>oceania</option>
</select>

You will have to create a string containing all the classes you want to add/remove seperated by space:
$("#mydiv").removeClass("africa europe america asia oceania");

Related

Javascript get value from select option based on label

Using either jQuery or pure JavaScript, how can I get the ID for a select option based on the label? So for example, given the following:
<select id="blah">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
If I have the label "Two" but I need to know the value associated with it, how can I get that value from this select? I don't want to simply select it, I need to know what the value is.
If the only reference you have is really the actual text content, then you'll have to loop through the elements and check the content of each one. Shown here with jQuery just because it's less to type:
var result;
$("option").each(function() {
if ($(this).text() == "Two") {
result = $(this).attr("value");
return false;
});
});
Another option:
$('#blah').find('option:contains("Two")').val();
(Pun intended?)
Get all the options and then use find to get the one with specific text.
const optionEls = Array.from(document.querySelectorAll("#blah option"));
const hasText = text => el => el.textContent === text;
const optionWithTwo = optionEls.find(hasText("Two"));
console.log(optionWithTwo.value);
<select id=blah>
<option value=1>One</option>
<option value=2>Two</option>
<option value=3>Three</option>
</select>

How can I hide some elements from a select list?

I am new to programming and I would like to know how to hide some options from a select control I have...
I am going to explain the thing: So, i have two select controls.. according to the option from the select number 1, I want to hide some items from the second select, but I don't know how to do it, I was trying with some jQuery .hide but it is not working... Hope you can help me...
Thank you
Hope this gives you an idea, since you didn't post any code.
HTML
<select id="selectA">
<option value="">Select Fruit or Veg</option>
<option value="fruit">Fruit</option>
<option value="vegetable">Vegetable</option>
</select>
<select id="selectB">
<option value="">All</option>
<option value="apple" data-type="fruit">apple</option>
<option value="orange" data-type="fruit">orange</option>
<option value="carrot" data-type="vegetable">carrot</option>
<option value="tomato" data-type="vegetable">tomato</option>
</select>
JS
var selectA = document.querySelector('#selectA')
var selectB = document.querySelector('#selectB')
selectA.addEventListener('change', event => {
var type = event.target.value;
[].slice.call(selectB.querySelectorAll('option'))
.forEach(el => {
el.style.display = (el.dataset.type === type ? 'block' : 'none')
})
})
JSFiddle Demo: https://jsfiddle.net/hw76aLqv/1/
Try this.
if($("#APU").val("1")) {
$("#celda option[value = 'raven']").wrap('<span>')
}
To show again, just find that option(not span) and
$("#celda option[value = 'raven']").unwrap()
I hope this helps . Although the jQuery function is pretty lengthy but This way you will be able to get what is actually happening . After selecting an option from first select element , do a check whether id is 'selectA' or not .
Take the selected option as an object in the variable OPTIONS.
and then go to the next select Element using .next() function .
There use a loop which will go through all the child elements of select element .
after that I am doing a check . If the data-type of the child element is not equal to options.val() hide the child element using .hide()
Here is the code
$(document).ready(function(){
$('select').on('change',function(){
if($(this).attr('id')=='selectFirst'){
var options = $(this).find('option:selected');
var nextSelect = $('select').next();
nextSelect.children().each(function(){
child = $(this);
if(child.attr('data-type') != options.val()){
child.hide();
}
});
}
});

<select> tag and returning multiple values to javascript method

I have an issue with the data which is sent from a drop down menu, the selector only returns a single value, even when multiple values are selected. I have searched online for a solution to this, but they all use PHP, JQuery or some method outside the scope of the course I am taking; to capture multiple selected items. I have tried .value of the individual options, but that returns all of the options rather than just the ones which are selected. Is there some kind of trick to sending multiple values?
Here is my code for the menu. For example If I select JAVA PROGRAMMING, NETWORKS and VIDEO GAMES, only JAVA PROGRAMMING is sent.
<select multiple id="CK_Expertise">
<option id="CK_Exp1" value="Java programming">JAVA PROGRAMMING</option>
<option id="CK_Exp2" value="Networks">NETWORKS</option>
<option id="CK_Exp3" value="Video game programming">VIDEO GAMES</option>
<option id="CK_Exp4" value="Accounter">ACCOUNTER</option>
<option id="CK_Exp5" value="Help Desk">HELPDESK</option>
<option id="CK_Exp6" value="C++ programming">C++</option>
<option id="CK_Exp7" value="Programming">PROGRAMMING</option>
</select>
I have also tried using the Select Object in the DOM, http://www.w3schools.com/jsref/dom_obj_select.asp
which has a few methods for accessing the options in the dropdown menu. One method in particular called selectedIndex, seemed to be what I am looking for, however it only returns the the index of the first selected option, instead of all of the selected options.
Is there a simple solution to this using just Javascript and the DOM?
Thanks
- Chris
Get the options, iterate and check if they are selected, and add the values to an array
var select = document.getElementById('CK_Expertise'),
options = select.getElementsByTagName('option'),
values = [];
for (var i=options.length; i--;) {
if (options[i].selected) values.push(options[i].value)
}
console.log(values)
FIDDLE
or being a little more fancy
var select = document.getElementById('CK_Expertise'),
values = Array.prototype.filter.call(select.options, function(el) {
return el.selected;
}).map(function(el) {
return el.value;
});
console.log(values)
FIDDLE
You could use the select.selectedOptions property:
select.onchange = function() {
var values = [].map.call(this.selectedOptions, function(opt){
return opt.value;
});
};
document.getElementById('CK_Expertise').onchange = function() {
document.querySelector('pre').textContent = JSON.stringify([].map.call(
this.selectedOptions, function(opt){ return opt.value; }
));
}
<select multiple id="CK_Expertise">
<option id="CK_Exp1" value="Java programming">JAVA PROGRAMMING</option>
<option id="CK_Exp2" value="Networks">NETWORKS</option>
<option id="CK_Exp3" value="Video game programming">VIDEO GAMES</option>
<option id="CK_Exp4" value="Accounter">ACCOUNTER</option>
<option id="CK_Exp5" value="Help Desk">HELPDESK</option>
<option id="CK_Exp6" value="C++ programming">C++</option>
<option id="CK_Exp7" value="Programming">PROGRAMMING</option>
</select>
<pre></pre>
If you can use jQuery, this will give you all the values
$(document).ready(function(){
$('#CK_Expertise').change(function(e){
var values = $('#CK_Expertise').val()
alert(values);
});
});
HTH,
-Ted
You could iterate storing select.selectedIndex in an array and unselecting the corresponding option to get the next one:
select.onchange = function() {
var i, indices=[], values = [];
while((i=this.selectedIndex) > -1) {
indices.push(i);
values.push(this.value);
this.options[i].selected = false;
}
while((i=indices.pop()) > -1)
this.options[i].selected = true;
console.log(values);
}
Demo
This way you avoid iterating over all options, but you must iterate twice over the selected ones (first to unselect them, them to select them again).
Why not using an indexed variable in the SELECT command?
<SELECT MULTIPLE id="stuff" name="stuff[]">
<OPTION value=1>First stuff</option>
<OPTION value=2>Second stuff</option>
<OPTION value=3>Third stuff</option>
</SELECT>
In that case it's easy to read the array:
$out=$_REQUEST['stuff'];
foreach($out AS $thing) {
echo '<br />'.$thing;
}
Sorry for the poor indentation, but I just wanted to show the way I use for solving this case!
var select = document.getElementById('CK_Expertise'),
options = select.selectedOptions,
values = [];
for(let i=0;i<options.length;i++)
{
values.push(options[i].value);
}
console.log(values);

Display option fields (child) based on parent option condition - JS solutions needed?

I am looking for a simple .js solution. I have two dropdown buttons - code:
<select name="parent_dropdown" id="parent">
<option value="option_01">parent_option_01</option>
<option value="option_02">parent_option_02</option>
</select>
<br />
<select name="child_dropdown" id="child">
<option value="opt01">child_option_01</option>
<option value="opt02">child_option_02</option>
<option value="opt03">child_option_03</option>
<option value="opt04">child_option_04</option>
</select>
Now I need to accomplish this:
When option_01 in #parent is chosen ---> make available only child_option_01 and child_option_02 in #child dropdown
When option_02 in #parent is chosen ---> make available only child_option_03 and child_option_04 in #child dropdown
I tried some solutions I found online but so far no luck. I have a very basic .js knowledge.
Link to FIddle: http://jsfiddle.net/q5kKz/343/
Help will be appreciated.
Taking the next step with your fiddle, this will do (almost) what you want:
$('#parent').change(function() {
$("option[value='opt01']")[$(this).val() == "option_01" ? 'show' : 'hide']("fast");
}).change();
Notice the attribute selector: "option[value='opt01']" - that says "any options with value of opt01".
You should probably expand that selector to be "#child option[value='opt01']"
Using a "basic" programming method, you could do this for multiple options:
$('#parent').change(function() {
$("option[value='opt01']")[$(this).val() == "option_01" ? 'show' : 'hide']("fast");
$("option[value='opt02']")[$(this).val() == "option_01" ? 'show' : 'hide']("fast");
// Adding multiple options here. This is a bad method for maintainability
}).change();
A better way to go would be to assign some sort of other attributes to the options that should show depending on which parent is selected. One example is using a class that matches the parent value desired - which would require modifying your child list like so:
<select name="child_dropdown" id="child">
<option value="opt01" class="option_01">child_option_01</option>
<option value="opt02" class="option_01">child_option_02</option>
<option value="opt03" class="option_02">child_option_03</option>
<!-- The below option would show whenever the parent is on option 2 OR 3 -->
<option value="opt04" class="option_02 option_03">child_option_04</option>
</select>
But then your script could be much more usefully constructed like so, and wouldn't need to be changed if you added / changed options:
$('#parent').change(function() {
var val = $(this).val();
$("#child option")[$(this).hasClass(val) ? 'show' : 'hide']("fast");
}).change();
This still leaves the problem of the list option hiding, and the select can still be set to a "hidden" value. This would need to be addressed somehow. Something like the below:
$('#parent').change(function() {
var val = $(this).val();
$("#child option")[$(this).hasClass(val) ? 'show' : 'hide']("fast");
var child_val = $('#child').val();
// If the selected option is not visible...
if ($('#child').find(":selected").not(":visible")) {
// Set it to the first option that has the proper parent class
$("#child").val($("#child option." + val + ":first").val());
};
}).change();
With newer versions of jQuery you could do something like:
var group1 = $("#child").find("option[value='opt01'], option[value='opt02']");
var group2 = $("#child").find("option[value='opt03'], option[value='opt04']");
$('#parent').change(function() {
var selected = $("#parent").find(":selected").text();
if (selected == "parent_option_01") {
group1.prop("disabled", false);
group2.prop("disabled", true);
} else {
group1.prop("disabled", true);
group2.prop("disabled", false);
}
}).change();
The other people may have it right. But when you want to make changes you have to change a bunch of JS code. I think this is a better approach. In our child HTML we add a data attribute to show what values of parent will make this child option show. This way if we ever need to add more elements or change what ones make the children appear we can just change the HTML and it leaves our javascript a lot cleaner.
http://jsfiddle.net/q5kKz/348/
var parent = $("#parent");
var child = $("#child");
var val;
$('#parent').change(function() {
//Get value of parent
val = $("#parent").val();
//cycle through children and find which data show matches the parent
child.children().each(function(){
var c = $(this);
//Jquery's .data wasn't working for some reason
if(c.attr("data-show") === val){
c.show()
}else{
c.hide()
}
})
}).change();
In the HTML
<select name="parent_dropdown" id="parent">
<option value="option_01">parent_option_01</option>
<option value="option_02">parent_option_02</option>
</select>
<br />
<select name="child_dropdown" id="child">
<option value="opt01" data-show="option_01">child_option_01</option>
<option value="opt02" data-show="option_01">child_option_02</option>
<option value="opt03" data-show="option_02">child_option_03</option>
<option value="opt04" data-show="option_02">child_option_04</option>
</select>

Showing and hiding <option> with jquery

I have three selects (html drop down lists), all contain the exact same values (except the ids of selects are different).
Now I want to do this:
When a user selects some option in the first select the same option is hidden in the other two. This rule applies to other two selects as well.
If the option in the second select is changed again then the previously selected option must reappear in the other selects.
I hope I was clear. I know this should probably be solved with javascript but I don't have enough knowledge of it to write an elegant solution (mine would probably be very long). Can you help me with the this?
$('#selectboxid').hide();
is the simplest way
http://api.jquery.com/hide/
try toggle it it matches your requirement
http://api.jquery.com/toggle/
you can call these onchange of the select box
if you want to hide individual options
use .addClass and add class to that option to hide it
http://api.jquery.com/addClass/
Little late the party, but here's a full working solution:
HTML:
<select>
<option value="Fred">Fred</option>
<option value="Jim">Jim</option>
<option value="Sally">Sally</option>
</select>
<select>
<option value="Fred">Fred</option>
<option value="Jim">Jim</option>
<option value="Sally">Sally</option>
</select>
<select>
<option value="Fred">Fred</option>
<option value="Jim">Jim</option>
<option value="Sally">Sally</option>
</select>
JavaScript:
$(document).ready(function() {
$("select").change(function() {
var $this = $(this);
var selected = this.options[this.selectedIndex].value;
var index = $this.index();
$("select").each(function() {
var $this2 = $(this);
if($this2.index() != index) {
$(this.options).show();
var $op = $this2.children("option:[value='" + selected + "']");
$op.hide();
if($this2.val() == selected) {
if($op.index() + 1 == $ops.length) {
$this2.val($ops.eq(0).val());
}
else {
$this2.val($ops.eq($op.index() + 1).val());
}
}
}
});
});
});
Also demonstrated here: http://jsfiddle.net/thomas4g/u2sbd/21/

Categories

Resources