We Keep Coding

Setting selected attribute for <select multiple> with jquery

I have a multiple select like this one could be:
<select multiple id="brand">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
And I'm looking for a way to end up like:
<select multiple id="brand">
<option value="volvo" selected="selected">Volvo</option>
<option value="saab" selected="selected">Saab</option>
<option value="opel" selected="selected">Opel</option>
<option value="audi" selected="selected">Audi</option>
</select>
I can't depend on external libraries and I can't make the .each function to work properly.
Besides I'm getting the original dinamically set with many fields, and this will be set to this only in a particular case, but i can't figure out why this isn't working for me.
The closest approach i found is:
$("#brand").each(function(){$(this).attr("selected","selected");});
Can you please point me out where I'm going wrong? Thanks

You need to select the options, for instance with a #brand > option selector:
$("#brand > option").each(function() {
$(this).attr("selected","selected");
});
console.log($("#brand").html());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple id="brand">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

in Vanilla Script you could use something like this
document.querySelectorAll('#brand option').forEach((o)=>{
o.selected = 'selected'
})
If You need IE, be aware that for Each is not supported with node Lists. This should work inkl. IE
nodesArray = [].slice.call(document.querySelectorAll("#brand option"));
nodesArray.forEach(function (o) {
o.selected = 'selected'
})
You wont see the changes in HTML Code, but the DOM Properties of the options will change. Hope this helps.

how to get index in selected item on change event (select box)?

I have 4 dropdown in my page .I want to know which dropdown is selected or changed using index,.But every time i am getting 0 index.here is my code
https://jsbin.com/fapahosenu/1/edit?html,js,output
$(function(){
function dropdownChangeHandler(){
console.log($(this).index())
}
$('[data-dropdown="dropdowns_js"]').on('change',dropdownChangeHandler);
})
this is not I am wanted ..I want if I change first dropdown it gives me 0.
I change second dropdown it gives me 1.I change third dropdown it gives me 2

The issue is because you're getting the index() from the select yet they are not siblings, hence they all return 0.
To fix this pass a selector to index() which is the group of elements you wish to find the index in, like this:
$('[data-dropdown="dropdowns_js"]').on('change', function() {
var index = $(this).index('[data-dropdown="dropdowns_js"]');
console.log(index);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<span>
<select class="dropdowns_js" data-dropdown="dropdowns_js" data-key="bank">
<option selected="true" disabled="true" value="0">Select Bank</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</span>
<span>
<select class="dropdowns_js" data-dropdown="dropdowns_js" data-key="state">
<option selected="true" disabled="true" value="0">Select State</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</span>
<span>
<select class="dropdowns_js" data-dropdown="dropdowns_js" data-key="district">
<option selected="true" disabled="true" value="0">Select District</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</span>

Add the event onclick and pass the value with function dropdownChangeHandler(1) like this

Try with below function it will give you the selected drop-down index. Please mark as answer, if your problem resolve with my solution
function dropdownChangeHandler(){
$('.dropdowns_js').each(function(a,b){
if($(this).is(":focus"))
{
console.log(a);
}
});
}
If you select state drop-down, It will give you 1 as selected index

Drop down list show all elements but disabled for selection

I have JSP page and drop down list programatically populated.
Now, under some circumstances that dropdown should be disabled, but user should be still able to see all of it's element, but can't actually select it, something like this: https://jsfiddle.net/nenadbulatovic/6g4pmmpv/1/
<select>
<option value="Select...">Select...</option>
<option disabled value="volvo">Volvo</option>
<option disabled value="saab">Saab</option>
<option disabled value="mercedes">Mercedes</option>
<option disabled value="audi">Audi</option>
</select>
Obviously as there is condition I can't just put disable next option.
This is actual part of code (drop down) where I need that.
<div class="row-fluid">
<div class="span3">
<label><%=Constants.REQUIRED%> <c:out value="${requestScope.RESOURCES_MAP.SITE_PARENT}"/>:</label>
<select class="selectpicker" data-width="100px" id="siteParentNameSelect" style="width:250px;margin-bottom:0px;">
<option value=''>${requestScope.RESOURCES_MAP[SELECT]}</option>
<c:forEach var="siteParentName" items="${siteParentNameList}">
<option value="${(pageContext.request, siteParentName.id)}" ${siteParentName.id == '0' ? 'selected = "selected" ' : ''}> ${siteParentName.name}</option>
</c:forEach>
</select>
</div>
</div>
I should check if some condition like "enabledFlag" and then if it is true/false enable/disable its elements for selection.
EDIT: I can use only JSP/JSTL, JavaScript, JQuery

You should use Angular ng-disabled directive:
<select>
<option value="Select...">Select...</option>
<option ng-disabled=flag value="volvo">Volvo</option>
<option ng-disabled=flag value="saab">Saab</option>
<option ng-disabled=flag value="mercedes">Mercedes</option>
<option ng-disabled=flag value="audi">Audi</option>
</select>
For more info: https://www.w3schools.com/angular/ng_ng-disabled.asp
EDIT:
Unfortunatelly, I am not quite familiar with JSTL, but can't you do something like this?
<option value="mercedes" <c:if test="${flag}"><c:out value="disabled='disabled'"/></c:if>">

When select one option from "multiple select", remove it from other selects (and reverse)

I have 3 multiple selects like:
<select multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
</select>
<select multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
</select>
<select multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
</select>
and I am looking for best solution. Wanted behaviour is when you select one item in one multi select, then remove it from the others (and conversely).
I using jquery Chosen plugin.
Situation: you have 3 roles, but user can be just in one role.
jsFiddle

basically you want to remove the option via JS/jQuery and the update the plugin.
Here is some code
$(".chzn-select").change(function(){
$(".chzn-select")
.not($(this))
.find("option[value="+$(this).val()+"]")
.remove();
$(".chzn-select").trigger("liszt:updated");
});
and a fiddle link JsFiddle
EDIT:
try this new fiddle it handles multiple select
$(".chzn-select").css('width', '300px').chosen({
display_selected_options: false,
no_results_text: 'not found',
}).change(function(){
var me = $(this);
$(".chzn-container .search-choice").each(function(){
var text = $('span',this).text();
$(".chzn-select")
.not(me)
.find("option").each(function(){
if ($(this).text() == text) $(this).prop('disabled',true);
});
});
$(".chzn-select").trigger("liszt:updated");
});
EDITED:
try this:
JsFiddle
see if it pleases you... :)

HTML select option value

I have a select option :
<select>
<option value="select">select</option>
<option value="audi">Audi</option>
<option value="bmw">BMW</option>
<option value="vw">VW</option>
</select>
Now what I want is that whatever option I select from the dropdown, the value in the select should always be "select".
Thanks.

you could try something like this:
<select id="yourselect">
<option value="select">select</option>
<option value="audi">Audi</option>
<option value="bmw">BMW</option>
<option value="vw">VW</option>
</select>
<script>
var s = document.getElementById('yourselect');
s.onchange = function() {
s.selectedIndex = 0; // on change event always select the first option
}
</script>
Example Fiddle : http://jsfiddle.net/8geek/

Add an event listener for an onchange event, in that listener you set the currently selected option to Select dynamically

Like Jukka mentioned, it seems like you want a select element where all the choices have the same effect? However, you should at least store the the chosen option.
Maybe this is something you are looking for: http://jsfiddle.net/NfRRM/