I have a list of users that can be selected (multiple selection is possible). Of course all users can be selected manually, which is excellent.
Further on I have user groups. Most of the times it is required to select only those users of a group. Therefore i would like to have a kind of quickway to add all the users, just by clicking on the a group name.
I'm a big fan of select2, but i wasn't able to get this to work.
I have found that via the .val() function elements could be selected. But these elements are only displayed when another element is selected.
So i need a kind of update function. How can i do this?
I have tried to trigger events (like change) but without success.
Can you help me?
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/css/select2.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/js/select2.full.js"></script>
<script type="text/javascript">
$("#id_invited_user").select2({
"placeholder": "Select user",
});
$("#testbuttonclick").on('click',function (clickEvent){
clickEvent.preventDefault();
$("#id_invited_user").val([1,2]);
});
</script>
<select multiple="multiple" class="selectmultiple form-control"
id="id_invited_user" name="invited_user">
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
<option value="4">Option4</option>
<option value="5">Option5</option>
</select>
<a href="" id="testbuttonclick" >select predefined options</a>
You have all of the right code, except you are missing one important detail.
Whenever you change the value of Select2 (or any other JavaScript component), you should always trigger the change event. This event is nativly triggered by the browser when the value is changed, but it must be manually triggered when the value is changed programmatically.
$("#id_invited_user").trigger("change");
This should always be placed after your call to .val(xyz).
Related
I tried googling this but I am getting only on event trigger searches instead of what I am looking for.
I want to dynamically click on any of the options in the select dropdown by using the value or the text if possible.
HTML
<select id="certainspamselectid" name="certainspamselect" style="margin-left: 165px;">
<option value="0">permanently deleted</option>
<option value="4">moved to admin quarantine</option>
<option value="1">moved to junk email folder</option>
<option value="5">delivered to inbox with tag</option>
<option value="2">delivered to inbox</option>
</select>
I am not sure if I need to use something with $("#certainspamselectid").click..... but I am not sure what to use after click. I would have tried more things but my google searches keep pinpointing me for on event triggers when I just want to click on one of these options using either JS or jQuery.
I have read your problem and honestly, I can't understand what you want exactly.
However, it looks like you want to select some certain option of the select dropdown.
If that's right, you don't need to call some kind of click function.
You can do it easily with jQuery.
For example, imagine that you are going to select third option - "moved to junk email folder". Then you can select it by code like below.
$("#certainspamselectid").val(1);
If my answer is not enough for you, let me know detail of your problem.
With <select> what you need is .change instead of .click
Here is a quick example .. change the $value and check again
$("#certainspamselectid").on('change' , function(){
console.log("Value Changed To: "+$(this).val());
if($(this).val() == 5){
console.log("value 5 is selected");
}
});
let $value = 4;
$("#certainspamselectid").val($value).change();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="certainspamselectid" name="certainspamselect" style="margin-left: 165px;">
<option value="0">permanently deleted</option>
<option value="4">moved to admin quarantine</option>
<option value="1">moved to junk email folder</option>
<option value="5">delivered to inbox with tag</option>
<option value="2">delivered to inbox</option>
</select>
why don't you simply change the value of the select like this
$("#certainspamselectid").val(4)
It will automatically show the text from the selected option
I don't think that clicking on an option would help you
<select id="location-search" onChange="window.location.href=this.options[this.selectedIndex].value;"> >
<option value="http://dignitytech.com/efront/contact-us/">Ireland</option>
<option value="http://dignitytech.com/efront/united-kingdom-2/">United Kingdom</option>
<option value="http://dignitytech.com/efront/spain/">Spain</option>
<option value="http://dignitytech.com/efront/romania/">Romania</option>
</select>
Now i want to change the dropdown value as per page change.
Anybody help me
You should be able to achieve this with this simple line of code executed on page load:
$('#location-search').val(location.href);
Based on what you already have, I'm assuming that you have exactly that select on multiple pages. If so, then simply on each page mark appropriate value (so when you're on contact-us, mark that option with selected attribute).
I have a select list in a page that is initially as follows:
<select id="select-company-type" name="company_type">
<option value="">Company Type</option>
</select>
The options are then repopulated via a Mustache template when another select is changed
<script id="companyTypeOptionsTpl" type="text/template">
<option value="">Company Type</option>
{{#companies}}
<option value="{{title}}">{{title}}</option>
{{/companies}}
</script>
This works fine and the new option items appear in the drop down.
However, if I then try and select one of the options programatically with something like:
$('#select-company-type').val(selectedOption);
where selectedOption contains a string that matches one of the options - it doesn't work.
Also, even if I select an option manually, its value is not passed via GET or POST when the form is submitted.
It's as though the new options are not being recognised although they are visible.
Am I missing a trick here?
Thanks
I have two options in a combo box.
<select id="selLang">
<option value="/en" >english</option>
<option value="/fr" >french</option>
</select>
When i choose the second option the page is refreshed and the selected option isn't displayed in the top of the combo box (i mean, as the selected item.)
I want to set the selected option to be the selected option which is in the top of the combo box- within the view.
so my question is just how can i do it? or maybe i have to create a cookie? and if so -how do i do t-h-a-t?
Perhaps it's a silly question, but i'm quite new in this region.
Thanks in advance!
you need to set the selected attribute of the option. you can do it as follows:
<select id="selLang">
<option value="en" >english</option>
<option value="fr" selected="selected" >french</option>
</select>
Hope this is what you wanted..
see this
I'd recommend you taking a look at the ASP.NET MVC localization guide which will provide you with some nice ideas about how to implement this.
First, why when you choose the second option, the page is refreshed. Do you have any JavaScript function in action to post your form.
I ask that, because HTML <select> tag's change won't initiate an HTTP Post request. So, please update an explanation for that.
However, let's go back to your question. You can try this:
<select id='selLang' name='selLang'>
<option value="/en" >english</option>
<option value="/fr" >french</option>
</select>
This will cause the <select> tag to become a successful control during a POST request. This means that you can use this to create a script like:
$(function(){
$('#selLang').val('#HttpContext.Request["selLang"]');
});
I have a list of countries, html, they have numeric ids and country name:
Ex:
<select name="userDto.nationality" id="userDto.nationality">
<option value="">Seleccione</option>
<option value="1">Alemania</option>
<option selected="selected" value="2">Argentina</option>
<option value="8">Australia</option>
<option value="9">Austria</option>
<option value="10">Bélgica</option>
<option value="11">Bolivia</option>
</select>
Im trying to use a jquery script to get the country of the list, not the value, the name and paste it inside of a label.
$(document).ready(function() {
$("#userDto\\.nationality option:selected").click(function() { $("#nationalityLabel").html(this.value); });
});
And the HTML that should get the country name is:
<div name="userLabelDiv" id="nationalityUserLabelDiv">
<label class="required">Nacionalidad :</label>
<label id="nationalityLabel"></label>
</div>
Could someone guide me through the problem? I cant find where is my error in the JS code.
Thank you
Two little things:
change selector from $("#userDto\\.nationality option:selected")
to $("#userDto\\.nationality")
change event handler from click to change
Done.
$(document).ready(function() {
$("#userDto\\.nationality").change(function() {
$("#nationalityLabel").html(this.value);
});
});
Why:
Your current code would have worked, but only for "Argentinia" since it is selected by default. With your selector option:selected you bound the event handler only to selected option elements, which is, Argentinia.
So you need to add an event handler to the select element itself. The change handler fires whenever you change the selection. I guess that is your desired result.