I have a dropdownlist in my page and the html part lists below:
<select id="Permission_id" name="Permission_id"><option value="">Pls select</option>
<option value="001f492b-fbb2-440c-b2ac-1fab5d97f5e3">super</option>
<option value="559ede95-1dbb-45d5-ae41-2df6f460e87a">admin</option>
<option value="80b330ee-37dc-42c4-8902-c30254112c11">user</option>
<select>
And in the same page, I have another dropdownlist , the html part lists below:
<select id="TopPranet_id" name="TopPranet_id"><option value="">Pls select</option>
<option value="65c61442-e02f-4071-b746-2c7cbfcc859a">Settings--admin</option>
<option value="66d21c35-66a2-40d8-a9db-675b337fa0bb">Control--admin</option>
<option value="cd612bfc-9f61-4228-b986-90bda4be9d8d">Action--admin</option>
<option value="2a137846-5ae0-4104-b0c9-be09a0e772d8">Settings--super</option>
<option value="b75c43f3-cafb-41a2-a76b-c572fffd8a6a">Control--super</option>
<option value="2c3f618c-373f-4559-967f-d8dcea1b6996">Action--super</option>
</select>
Now I want to do things like below:
When Permission_id's select item changes, then TopPranet_id's item will only contains the items that have Permission_id's selected text inside. that is, if I select admin in Permission_id control, then TopPranet_id control will only contains Settings--admin,Control--admin,Action--admin item, others are removed.
I know I can use Jquery to do this, but I am a newer to this, also, regex maybe also required for doing this.
Need your help, thx.
Please check here i have added one ex
Here
You html all seems ok
Now
in javascript
$('#Permission_id').change(function()
{
$('#TopPranet_id option').each(function()
{
if(this.innerHTML.indexOf($('#Permission_id :selected').text())!=-1)
{}
else
{
this.style.display='none';
}
});
});
We have added change function which will detect the change event of the first dropdown and after this we will check that text with second dropdown which will show and hide the dropdowns
Related
I am working on a Spring MVC application that use Thymeleaf for the view.
I am absolutly new in Thymeleaf and I have the following problem.
At this stage of the work into a view I have a select which options values are hard coded into the code, something like this:
<select id="selReg" class="form-control">
<option value="" >--SELEZIONARE UN'AREA--</option>
<option value="areaUmanistica" >Area Umanistica</option>
<option value="areaLinguistica" >Area Linguistica</option>
<option value="areaScientifica" >Area Scientifica</option>
<option value="areaPsicoMotoria" >Area Psico-Motoria</option>
</select>
Now, into my controller, I retrieve a list of Tad1005Tipodisciplina objects using a service and I put this list into the model.
List<Tad1005Tipodisciplina> listaTipoDisciplina = tipoDisiplinaService.getListaTipoDisciplina();
model.addAttribute("listaTipoDisciplina", listaTipoDisciplina);
This Tad1005Tipodisciplina class contain this field:
private String desTipDis;
that I want to use in my view to dinamically show the content of the previous select.
How can I use this list putted into the model to dinamically populate my select options?
You need to iterate through your list using th:each in the select statement. This is where you define a variable that will represent each object in the list, which in turn you can use in each of the option tags like this:
<select id="selReg" class="form-control" th:each="object: ${listaTipoDisciplina}" th:field="*{listaTipoDisciplina}">
<option th:value="${listObject.desTipDis}" th:text="${object.desTipDis}"></option>
</select>
/Edit: A minute too late :)
Solved by myself, in this way:
<select id="selReg" class="form-control">
<option value="" >--SELEZIONARE UN'AREA--</option>
<option th:each="tipoDisciplina: ${listaTipoDisciplina}"
th:value="${tipoDisciplina.codTipDis}"
th:text="${tipoDisciplina.desTipDis}">
</option>
</select>
Posted because maybe it could be util to someone in the future
I have three dropdowns with same class name:
<select class="MyClass">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="MyClass">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="MyClass">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
I want to change any of these dropdown values based on any other dropdrop selected. If I select option two from second dropdown - I want 1st and 3rd dropdown values to be two. All these dropdown should change values no matter which one I select.
Thanks.
You will need JavaScript to do this. Here is an code example using jQuery:
$('.MyClass').on('change',function(){
$('.MyClass').val( $(this).val() );
});
This will add an EventListeneer for the change Element and update all DropDowns to the value of the changed one.
http://jsfiddle.net/CWP7Q/
you can use jQuery or normal JS, but my example contains Jquery, which will give you an idea. Please check the example in Jsfiddle.
The example binds a change event to the class name of the three selectors:
$(".MyClass").change(function(){
$(".MyClass").val($(this).val());
});
and Voila, every selector gets changed.
Somehting like (with jQuery)
$('.MyClass').change(function() {
$('.MyClass').val($(this).val());
});
I have a select list. I am using jQuery to update the selected item. The displayed item in the box isn't updating when I change the selected value. In the following example option "a" is set as selected. Then I use jQuery to change the selected item to "d". It still shows "a". However if you expand the list you can see that "d" is selected or highlighted. Not sure how to fix the issue. Any help would be appreciated!
http://jsfiddle.net/9wQcs/5/
Html:
<select id="t">
<option>select one</option>
<option id="a" selected="selected">a</option>
<option id="b">b</option>
<option id="c">c</option>
<option id="d">d</option>
</select>
jQuery:
$(document).ready(function () {
$('#d').prop('selected', 'selected');
});
Thanks,
Brian
First of all, refrain from using .ready() in jQuery Mobile.
When selecting an option programmatically, you need to re-ehance selectmenu widget.
$("#id").prop("selected", true);
$("select_id").selectmenu("refresh");
Demo
I have the following line in my gsp
<g:select name="platform" from="['Date','Time','Place','Calendar']"/>
I want the Time option to be automatically selected while loading the page.
<select>
<option value="Date">Date</option>
<option value="Time" selected="selected">Time</option>
<option value="Place">Place</option>
<option value="Calendar">Calendar</option>
</select>
This is what i need when my gsp page got rendered into html.
Please help me
Thanks in advance
You can do it by setting the g:select value
<g:select name="platform" from="['Date','Time','Place','Calendar']" value="'Time'"/>
but it would be better to bind it to an model.
I have a webpage containing input tags like the one below eg.
<input value='Cut' name='container_cut_button' type='submit/>
<input value='Copy' name='container_copy_button' type='submit/>
I want to put these into a dropdown, I was hoping it would be something simple like
<select onchange='submit()'>
<option name='container_cut_button'>Cut</option>
<option name='container_copy_button'>Copy</option>
</select>
but no such luck,
Anyone have any ideas about how this could be done?
Thanks in advance
Use the "value" attribute of the options rather than their name.
<select name="action">
<option value="cut_item">Cut</option>
<option value="save_item">Save</option>
</select>
On the server, you'll check the value of the variable "action." It will be either "cut_item" or "save_item".
I called a javascript function in the select tag ie. onchange="exec(value)", the function gets the select id and inserts the proper name attribute based on it value.
function exec(val){
if(val=='cut'){
document.getElementById("action").setAttribute("name", "cut")
}
}
This worked out ok