We Keep Coding

Get the name of all selected items from select multiple="multiple" options dropdown

I am trying to get the name of all selected items from select multiple="multiple" options dropdown.
In my html page, I have the following code snippet:
<select id="ddlCategory" ng-model="myCategory.myCategoryName" multiple>
<option selected="selected" value="1">Washroom</option>
<option value="2">Restaurant</option>
</select>
In my JS file, I have the following code snippet:
var categoryNameArray = $('#ddlCategory').val();
console.log("category = " + categoryNameArray[0];
However, the variable categoryNameArray only gives me the array of the selected items, what I want is the name of the selected items. Can someone tell me a way how I can make this work? Thanks!

Since val isn't giving you what you want, I'm going to assume you want an array of the text of the selected items.
You can get that like this:
var selectedTextArray = $("#ddlCategory option:selected").map(function() {
return $(this).text();
}).get();
That finds all the selected items, then uses map to get the text of each of them (wrapped in a jQuery object), then uses get to turn that jQuery object into an array.
You can probably use return this.text; rather than return $(this).text();, since HTMLOptionElement has a text property (which most elements don't), but I'd be sure to test with my target browsers to be sure.
Example:
$("#btn").on("click", function() {
var selectedTextArray = $("#ddlCategory option:selected").map(function() {
return $(this).text();
}).get();
console.log(selectedTextArray);
});
Select some items, then click
<input type="button" id="btn" value="here">
<br>
<select id="ddlCategory" ng-model="myCategory.myCategoryName" multiple>
<option value="1">Washroom</option>
<option value="2">Restaurant</option>
<option value="3">Service Station</option>
<option value="4">Drive-Thru</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Example with this.text instead of $(this).text():
$("#btn").on("click", function() {
var selectedTextArray = $("#ddlCategory option:selected").map(function() {
return this.text;
}).get();
console.log(selectedTextArray);
});
Select some items, then click
<input type="button" id="btn" value="here">
<br>
<select id="ddlCategory" ng-model="myCategory.myCategoryName" multiple>
<option value="1">Washroom</option>
<option value="2">Restaurant</option>
<option value="3">Service Station</option>
<option value="4">Drive-Thru</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

val() returns the values on the selected options, in your case 1, 2 .... You should use text() to get the names of the selected options. You can loop through all selected options using each() method and get the selected values using text():
$('a').on('click', function(e) {
e.preventDefault();
$('#ddlCategory option:selected').each(function(i, selected) {
console.log($(selected).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ddlCategory" ng-model="myCategory.myCategoryName" multiple>
<option selected="selected" value="1">Washroom</option>
<option value="2">Restaurant</option>
</select>
Send
You can read more on how val() works here.
You can read more on how text() works here.

Try this:
var categoryNameArray =
$('#ddlCategory option:selected').map(function(){
return this.text;
}).get();
console.log("category = " + categoryNameArray);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ddlCategory" ng-model="myCategory.myCategoryName" multiple>
<option selected="selected" value="1">Washroom</option>
<option selected="selected" value="2">Restaurant</option>
<option value="3">Coffee Shop</option>
<option value="4">Hotels</option>
</select>

Easy way to get all selected value is $('#ddlCategory').val();

jquery get selected values of multiple select boxes

i have this form ..
<form method="post" action=''>
<select class="first">
<option value="0">choose ...</option>
<option value="1">Hello</option>
<option value="3">It's</option>
</select>
<select class="second">
<option value="0">choose ...</option>
<option value="2">World</option>
<option value="4">me</option>
</select>
<input type="text" class="dest" value="" />
</form>
and would like to dynamically gather selected informations with jQuery, because I need to decide on the selected values ...
When you select specific combination of OPTION values (lets say Hello + World) it should add some value to INPUT.dest and lock it (disable from editing) ...
But I can't make it work ... What I have, is that on each change of each select (separately only) i can map the actual value
$(document).ready(function () {
$(".first").change(function () {
var option = $(this).find("option:selected").val();
$(".dest").val(option);
});
$(".second").change(function () {
var option2 = $(this).find("option:selected").val();
$(".dest").val(option2);
});
});
Here is the live demo in fiddle
Do you know what am I missing? I know it will be just a little thing .. thank you

I would generalize it and use one event listener, and then gather the combination and do whatever:
$("select").change(function () {
var first = $(".first").find("option:selected").val();
var second = $(".second").find("option:selected").val();
if(first == 1 && second == 2)
$(".dest").val("Hello world").prop("disabled",true);
else
$(".dest").val("Something else").prop("disabled",false);
});
http://jsfiddle.net/cxx428af/3/

Remove <option> by .class AND when custom attribute NOT equal to x

What I have:
I have a select element. Some of the options have both a class (.filterable_option) and custom attribute (data-clienturn).
What I need:
Based on the on change event of another element, I need to remove options from the select element that:
...are classed as .filterable_option.
...have a data-customattribute value NOT EQUAL TO the value of a predefined variable (var = $some_value).
My code:
HTML:
<select name="myselect_a">
<option selected="selected"></option>
<option value="Apply filter">Apply filter</option>
</select>
<select name="myselect_b">
<option selected="selected"></option>
<option data-customattribute="58" value="1" class="filterable_option">Dog</option>
<option data-customattribute="58" value="2" class="filterable_option">Cat</option>
<option data-customattribute="60" value="3" class="filterable_option">Parrot</option>
<option>I have no class or custom attribute.</option>
</select>
jQuery:
$('#myselect_a').on('change', function() {
var $myselect_a_option = $("#myselect_a").val();
if($myselect_a_option === 'Apply filter'){
var $some_value = '58';
$("select[name=myselect_b] option.filterable_option[data-customattribute!=" + $some_value + "]").remove();
}
});
JSFiddle:
For your convenience: http://jsfiddle.net/clarusdignus/L82UH/
My problem:
My code is not removing the required in options. Nothing happens.

You have used a name in your selector. Use an id instead as shown below
<select id="myselect_a">
<option selected="selected"></option>
<option value="Apply filter">Apply filter</option>
</select>
http://jsfiddle.net/L82UH/1/
Or if you still want to go for name, try the below code:
$('select[name="myselect_a"]').on('change', function() {
//your code
});

You have wrong selector for select and also following bit is corrected:
name='myselect_b']
Demo: http://jsfiddle.net/aamir/L82UH/2/
$('select[name="myselect_a"]').on('change', function() {
var $myselect_a_option = $(this).val();
if($myselect_a_option === 'Apply filter'){
var $some_value = '58';
$("select[name='myselect_b'] option.filterable_option[data-customattribute!=" + $some_value + "]").remove();
}
});

See you have name attribute in your markup:
<select name="myselect_a">
and you are using a id selector:
$('#myselect_a')
this is the issue.

javascript change div based on dropdown

I have a dropdown list with 2 options:
<select name="list" size="1">
<option value=1>Option 1</option>
<option value=2>Option 2</option>
</select>
And i want to set <span id=tag></span> to display different text depending on which option is highlighted in the dropdown. How can I do this?

Well, the question is pretty vague but in general you would do something like this:
Html:
<select id="mySelect" name="list" size="1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<span id="tag"></span>
Javascript:
//cache the select and span elements
var mySelect = document.getElementById("mySelect"),
tag = document.getElementById("tag");
//when it changes
mySelect.onchange = function() {
//change the tag innerHTML checking the selected value of the select
tag.innerHTML = mySelect.value === "1" ? "some text" : "some other text";
}
You could change the ternary operator (? :) for a few if statements, if you need more conditions.
Notice that I've added an Id to the <select>. You can avoid the caching part if you want to get the span each time the select changes for some reason

You can do it with an onchange event handler on your <select>:
<select name="list" id="list">
<option value="1">Option 1</option>
<option value="1">Option 1</option>
</select>
<span id="tag"></span>
<script>
// Get references to the objects you need (<select> and <span>)
var list = document.getElementById('list');
var tag = document.getElementById('tag');
// When the list value changes, set the innerHTML of the <span>
list.onchange = function() {
tag.innerHTML = this.value;
};
</script>
Notice in the above that I've added id attributes to both your select and span elements. This allows me to easily get a reference to them in Javascript.
It's also important for my example that the script is executed after the elements are rendered, otherwise the document.getElementById call won't return a reference to them. You could get around this limitation by moving the script into a window.onload handler.
Here's a simple example of it working.

Setting index of select elements across a class

I am making a form that has various select elements like this
<select class="nace">
<option value="no" selected="selected">No</option>
<option value="yes">Yes</option>
</select>
I am trying to write a jQuery snippet that will change the selection of all these selects of the class "nace", so the slected values are all in unison. But I am struggling a bit with the functionality.
So far I have an event bound to a the changes on selects but cant quite get it right. Can anyone help me?
$('.nace').change(function() {
var selected = $(this).val();
$('.nace option:selected="selected"' ).each(function(){
$(this+' option[value='+$(this).value+']').attr('selected', 'selected');
});
});

I would have said just this:
$(document).ready(function() {
$('.nace').change(function() {
var selected = $(this).val();
$('.nace' ).val(selected);
});
});

Try this
JAVACSRIPT
$('.nace').change(function() {
var selected = $(this).val();
$('.nace' ).each(function(){
$(this).val(selected);
});
});
HTML
<select class="nace">
<option value="no" selected="selected">No</option>
<option value="yes">Yes</option>
</select>
<select class="nace">
<option value="no" selected="selected">No</option>
<option value="yes">Yes</option>
</select>
<select class="nace">
<option value="no" selected="selected">No</option>
<option value="yes">Yes</option>
</select>
Example here
http://jsfiddle.net/FwYmf/

This should be sufficient:
var $nace = $('.nace').change(function() {
$nace.val($(this).val());
// or (but not necessary) $nace.not(this).val($(this).val());
});
OT: If your select field has only two options, consider using radio buttons.