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());
});
Related
To start with - I am new to writing regular expressions.
I have two dropdowns as FromCity and ToCity which ate HTML options (as dropdowns). However both are having same left right boundary due to which not able to extract the specific values of a drop down at runtime.
e.g.
FROM CITY DROPDOWN
<select name="fromPort" class="form-inline">
<option value="Paris">Paris</option>
<option value="Philadelphia">Philadelphia</option>
<option value="Boston">Boston</option>
<option value="Portland">Portland</option>
<option value="San Diego">San Diego</option>
<option value="Mexico City">Mexico City</option>
<option value="São Paolo">São Paolo</option>
</select>
TO CITY DROPDOWN
<select name="toPort" class="form-inline">
<option value="Buenos Aires">Buenos Aires</option>
<option value="Rome">Rome</option>
<option value="London">London</option>
<option value="Berlin">Berlin</option>
<option value="New York">New York</option>
<option value="Dublin">Dublin</option>
<option value="Cairo">Cairo</option>
</select>
I can fetch the city names with - <option value="(.*?)"> but not able to distinguish which value is for which dropdown.
Is there a better way to handle this using regular expression ?
Using regular expressions for parsing HTML is not the best option, I would rather suggest using CSS Selector Extractor instead
This way you will be able to get "from" city names as select[name=fromPort] option and "to" city names as select[name=toPort] option
Demo:
More information:
CSS Selectors Reference
How to Use the CSS/JQuery Extractor in JMeter
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 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
I have a select list say of states in the country, which i have in a helper to include easily in any form. (removing most options to make it brief).
I have the value of the current selection stored in the database say "CA". How would i set selected="true" to option CA before rendering the list to the user?
#helper StateSelect(string name = "State")
{
<select name="#name" id="#name" class="required">
<option value="">-- Select -- </option>
<option value="AK">Alaska</option>
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="AZ">Arizona</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="VA">Virginia</option>
<option value="VT">Vermont</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
}
As Darin Dimitrov says, the built-in stuff would be better. However, if you do need to, I think you have a few options:
Add code like this to every line:
<option value="CA" #(name == "CT" ? "selected=selected" : "")> Connecticut</option>
Just re-add the selected item to the top of the list
This keeps the code cleaner, the selected option is just repeated at the top (and selected there), before the entire list
<form method="post">
<select name="users" id="users" onchange="showUser(this.value)" value="">
<option value="">Select a person:</option>
<option value="1" onchange="copy();">tcs</option>
<option value="2" onchange="copy();">wipro</option>
<option value="3" onchange="copy();">Hcl</option>
<option value="4" onchange="copy();">krystal kones</option>
</select>
</form>
I have this drop down i want that when the value is changed like tcs,wipro or hcl then that value should shown in html label
Try putting the onChange attribute in the select tag.
Example: http://jsfiddle.net/r6Fus/
HTML:
<div id="label"></div>
<select id="mySelect" onchange="copy();">
<option value="">Select a person:</option>
<option value="tcs" >tcs</option>
<option value="wipro" >wipro</option>
<option value="Hcl" >Hcl</option>
<option value="krystal kones" >krystal kones</option>
</select>
Javascript:
function copy() {
document.getElementById("label").innerHTML = document.getElementById("mySelect").value
}
Otherwise you could use jQuery.
First of all, the onchange event is for the select element, not the option elements. Those don't actually change. Also, you have two JavaScript functions. showUser() and copy(). But you describe only one piece of functionality. What do these two functions do?
As for showing the text in the label, here's one way to do it (using jQuery, because everybody does):
$(document).ready(function() {
$('#users').change(function() {
$('#myLabel').text($(this).val());
});
});
What this is basically doing is:
Wait until the DOM is loaded and ready.
Bind a function to the change event of the specified select element.
The function contains one line, which sets the text of the specified label to the value of the select.