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.
Related
i am looking how to have it when i pick volvo option then the 740 is selected. i want to add other if statements but i cant not figure this out. if i pick saab i want it to select 240
I would like to use jquery or javascript
Thank you in advance. This is what i have and it does not work.
Below is the corrected code to change the drop downs.
<select id="myselect1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select id="myselectVolvo">
<option value="740">740</option>
<option value="940">940</option>
<option value="240">240</option>
<option value="340">340</option>
</select>
$('#myselect1').change(function(){
if($('#myselect1').val() == 'volvo'){
$('#myselectVolvo').val('940').trigger('change');}
else if($('#myselect1').val() == 'saab'){
$('#myselectVolvo').val('240').trigger('change'); }
//alert("The text has been changed.");}
//};
});
You have a typo in the last js code line.
#myselctVolvo should be #myselectVolvo
your condition in if is wrong you need to use $('#myselect1').val() == 'volvo'. You
missed .val() after jquery selector.
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>">
I have developed a site with multiple select elements in the same form
<select>
<option value="">Select ...</option>
<option value="1">Apple</option>
<option value="2">Banana</option>
<option value="3">Carrot</option>
<option value="4">Orange</option>
<option value="5">Pear</option>
</select>
There are 8 selects with the exact same options on the page.
The user wants to copy and paste the selected values of a select from one to another.
The end user initiates it by using Ctrl+C, Ctrl+V. The web app was written to replace an excel app which allows copy and paste by the end user
However an html select doesn't support copy and paste. (Ctrl+C, Ctrl+V)
What can I do?
Any plugin that can maybe do this? Any minimal autocomplete select to suggest that looks like the standard select?
Edit:
Using the datalist example can be a solution. Only problem is that it allows invalid text i.e. text that is not one of the select options (apart from nothing) to be typed in. How do I only allow valid text?
See #Hashbrown answer in Copy selected item's text from select control html question. Sure it would help you as it's partially match your question.
Also you can take a look on How do I copy to the clipboard in JavaScript? as it has a lot of info related to your question.
Good Luck!
You should use datalist and handle none valid input as follow:
$('input[list]').on('change', function() {
var options = $('option', this.list).map(function() {
return this.value
}).get();
if (options.indexOf(this.value) === -1) {
this.value = "";
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input list="food1" name="food1" placeholder="Select...">
<datalist id='food1'>
<option disabled>Select ...</option>
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Carrot">Carrot</option>
<option value="Orange">Orange</option>
<option value="Pear">Pear</option>
</datalist>
<input list="food2" name="food2" placeholder="Select...">
<datalist id='food2'>
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Carrot">Carrot</option>
<option value="Orange">Orange</option>
<option value="Pear">Pear</option>
</datalist>
Try using datalist
<input list="foods" name="food">
<datalist id='food'>
<option value="1">Select ...</option>
<option value="1">Apple</option>
<option value="2">Banana</option>
<option value="3">Carrot</option>
<option value="4">Orange</option>
<option value="5">Pear</option>
</datalist>
http://www.w3schools.com/tags/tag_datalist.asp
Set the "value" attribute of one select to that of another with
document.getElementById('[select element1]').value = document.getElementById('[select element2]').value;
You can put this in the onClick handler for a button if you want.
Try this code
var src=document.getElementById('src');
var des=document.getElementById("des");
var opt=document.createElement("Option");
opt.value = src.options[src.selectedIndex].value;
opt.text = src.options[src.selectedIndex].text;
des.options.add(opt);
See the datalist element: http://www.w3schools.com/tags/tag_datalist.asp
It is used like this:
<input list="browsers" name="browserselect" type="text"/>
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
The list attribute of the input element tells the input element to use the datalist with that id.
<select name="a" id="a">
<option value="1">abc</option>
</select>
<select name="b" id="b">
<option value=""></option>
</select>
<script type="text/javascript">
$('select#a').on('change',function(){
var v = $(this).val();
$('select#b').val(v);
});
</script>
good hi, i am using Chosen js https://harvesthq.github.io/chosen/
but I need to call a function when you do not find any value in the list
that's my code:
i have this :
<select name="cboTipoProducto" id="cboTipoProducto" class="chzn-select" <option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<script type="text/javascript">$(function(){
$(".chzn-select").chosen({no_results_text: "<a href='myfunction' >"}); });
but not working please help me . thanks
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... :)