There are two select boxes ,both of them are populating from database.second select box should be populate based on the value selected from the first select box.first select box is already populated but i am unable to populate the second select box
<select id="country_obj" name="custCountry" class="field_size_e">
<%
Iterator contryIter = countries.iterator();
Lookup lookup = null;
while(contryIter.hasNext()) {
lookup = (Lookup)contryIter.next();
if(bbForm.getCircuit().getCustCountry().equalsIgnoreCase(lookup.getLabel())){
out.print("<option selected=\"selected\" value='"+lookup.getValue()+"'");
out.print(">");
out.print(lookup.getLabel());
out.println("</option>");
}else{
out.print("<option value='"+lookup.getValue()+"'");
out.print(">");
out.print(lookup.getLabel());
out.println("</option>");
}
}
%>
</select>
how do i populate the second select box based on the value of first select box
You can have a function in javascript to populate options for your second select tag.
function populate(val)
{
//val is a string similar to "<option value='new_option'>new option</option><option...</option>..."
$('#my_select2').append(val);
}
//below method is triggered whenever you select a value for your first select box
$("#country_obj").change(function(){
var selected_str = $("#country_obj option:selected").text();
//now pass this selected_str to a php page where options generation method is present using $.ajax (refer http://api.jquery.com/jQuery.ajax/)
//or you can implement the method here (in javascript) to generate options for your new select tag.
}
})
Note: This is just for guidance. You can have implementations of both methods in one or you can have multiple methods. I'll leave that for you to decide.
EDIT: you can't have options generated for your second select tag in the same php page (like in your question) because, by the time your page is loaded and a user selects a value for first select tag your php code is already executed.
Related
Scenario1: I have two fields in the screen district and territory. For some user it has default value selected and the drop down is disabled.
PFB code for reference.
<select id="abcd" name="xyz" class="12234" style="ghfhgfhfh">
<option class="hide" value="4541ghj" selected="">valley
none</option>
</select>.
I am trying to get the "valley none" as the output if the drop down is disabled.
Scenario 2: I have two fields in the screen district and territory. For some user it has default value selected and the drop down is enabled.
At this time I want to select the option from the drop down now.
For this I am trying to make a common code.
What I am doing now:-
I am making a select type element and them I am trying to get the default value by getfirstselectedvalue() and then saving it in the webelement and then I am doing .gettext(). to get the option selected.
other wise if the null is returned from thr firstselectvalue() function then I am trying to select the value by visible text.
Error:-
if the default value is selected and the drop down is disbaled The getfirstselectedvalue() function is returning null ,if the element type is select but if I make it as webelement and then doing gettext it gives me the value in the field but this cannot be done if the drop down is senabled as at that time the type to element should be select to select the value from enabled drop down. At both the scenario the class is select for the fields
Please help....
As mentioned by Greg we need the html and the code you tried for better understanding. However, this is the simple logic that you can use.
//get the listBox Element
WebElement list = driver.findElement(By.xpath("//select[#id='abcd']"));
// check if it's disabled
if (!list.isEnabled()) {
// get value from option 1 as listbox is disabled.
System.out.println(list.findElement(By.tagName("option")).getText());
}else {
// select value as listbox is enabled. (Chnage 'Scenario2' with desired list item
list.findElement(By.xpath(".//option[.='scenario2']")).click();
}
I understand how to Select an element from dropdown using selectByIndex method. Howeverwhen I try to perform selectByIndex ( select.selectByIndex (index) ) on the following HTML snippet:
<select id="destinationAllocationId" name="destinationAllocationId">
<optgroup label="Anywhere Virtual Cards">
<option value="1555555555f0a19">NNN0 [*-2453]</option>
<option value="1555555555f0519">NNN1 [*-8354]</option>
<option value="155555555550419">NNN2 [*-5765]</option>
<option value="155555555520919">NNN3 [*-8875]</option>
</optgroup>
</select>
</div>
I'm unable to maintain the selected option.
At first it appears to work (the dropdown menu opens and the correct option is highlighted inblue). However as soon as the program continues with execution (something unrelated to dropdown) the dro pdown reverts back to the original state (the default option).
In other words, initially the the program selects the appropriate option just fine but it automatically reverts back to the default option and doesn't actually change the value in the dropdown once the dropdown menu disappears (Usually when I select an option manually I can see that option being selected once the drop down is closed however in this case as long as dropdown is open the option is selected but as soon as it closes the default option is selected)
Any ideas why this happens
i had this issue, too
this is how i solved it
/**
* helper method for handling drop downs
* #param idPrefix the id of the drop down without any _xy
* #param value the value to be selected
*/
public void clickDropdown(String idPrefix, String value) {
// find & click on the label element of the drop down
firefoxDriver.findElement(By.id(idPrefix + "_label")).click();
// find & choose element from drop down
firefoxDriver.findElement(By.xpath("//div[#id='" + idPrefix + "_panel']/div/ul/li[text()='" + value + "']")).click();
}
u call it like this:
// choosing an element in the drop down menu
clickDropdown("projectForm:stellvertreter", "StringToSelect");
this i wrote for use with primefaces, you have to modify it anyway but u get the idea
for the issue with selecting and reverting... try sending an enter key press to the selected item or clicking it again... didnt have that with my approach
I am working in JSP, which I am very new to, and trying to submit values from a select box that can select multiple values to an action class in Java.
<select multiple="multiple" name="ProjectIDs" listKey="projectID" listValue="name" id='lstBox2' style="min-width:150px">
</select>
At the moment I am able to select multiple values and pass the keys to a List variable called 'ProjectIDs' in my action class, which is what I want to do. But I would like to load all of the values in that select box without having to highlight them. This is because the values in the select box are loaded from another select box using javascript and a button that transfers the selected values from that select box to this one. So I shouldn't have to select the values in this select box because I always want to load ALL of them.
What is the easiest way to pre-select all of the values in the select box when I hit the submit button so that I don't have to highlight them myself?
Thank you! And sorry if my explanation was not very clear. I will further explain if this is the case.
Edit: I have made some changes in response to the answer provided. I am also using the Struts framework. So my select box starts out as an empty struts select box, which is then populated from the other struts select box.
<s:select list="#{}" multiple="true" name="ProjectIDs" listKey="projectID" listValue="name" id='lstBox2' style="min-width:150px"/>
Then in my form tag I added this onsubmit function:
<s:form id="formMain" action="performancereport" theme="simple" method="get" onsubmit="selectAllOptions('lstbox2');">
And then finally this javascript function:
function selectAllOptions(selStr)
{
var selObj = document.getElementById(selStr);
for (var i=0; i<selObj.options.length; i++) {
selObj.options[i].selected = true;
}
}
However, I am still having the same problem. If I highlight all the options myself, it works fine, but it is not automatically selecting them for me when I hit the submit button.
Any suggestions?
Edit 2: RESOLVED.
You can programatically select all the options using javascript:
var select = document.getElementById("lstBox2");
for(var i = 0; i < select.options.length; i++)
{
select.options[i].selected = true;
}
You can do this in your onsubmit function...right before you submit the form.
RESOLVED:
I added this jQuery code to occur before the form is submitted.
$(function() {
$('#formMain').submit(function() {
var select = document.getElementById("lstBox2");
for(var i = 0; i < select.options.length; i++)
{
select.options[i].selected = true;
}
return true;
});
});
Here is the situation. I have a drop down menu. The option sin this drop down menu are being populated by fetching some values from the database. To do this following is what i have done.. :-
<select name="product_list" onchange="selectProduct(this.value)">
<option value="none">Select one</option>
<%
List<String> options = new ArrayList<String>();
DynamicCombo comboBox = new DynamicCombo();
options = comboBox.generateComboBox();
Collections.sort(options);
int tempVar = 0;
while (tempVar < options.size()) {
out.print("<option value=\"");
out.print(options.get(tempVar));
out.print("\">");
out.print(options.get(tempVar));
out.print("</option>");
tempVar++;
}
%>
</select>
DynamicCombo is a class that has a method called 'generateComboBox()'. This method simply returns an array list containing all the values that are fetched from the database, which is what i need to show in my drop down box in the front end (jsp page). On my jsp page i simply iterate through this list and print it as options appropriately.
This works absolutely fine.
Now i have another text box on my form, say 'textbox1'. Now the requirement is that this text box value should be updated depending on what the user has selected from the above drop down box.
So for example if the user selects 'prod1'(which is a primary key in the backend database table) option from the drop down box, then the corresponding value ( the product name) should be fetched from the database table and should be updated in the textbox named 'textbox1'.
The other thing is this entire thing is contained in a form which is supposed to be finally submitted to the servlet for further processing.
So how can i achieve this.
i figured out the solution to my own problem. It might not be the most elegant way of doing it, but it does the job pretty well.
So as per my requirement, what i exactly wanted to do was.... insert a value (that will be fetched from the database) into a text box on my form depending on what the user chooses from the drop down box that is already present on my form.
To achieve this, i went about and thought if some how i could nest a form withing my main form, it'd solve my issue. But i discovered that nesting of forms is not allowed. So the next option i thought of was to some how submit the same form without the user clicking on the submit button and also handle it appropriately as an 'incomplete' submit (in the sense that the form is still to be submitted manually by the user by clicking on the submit button) on the server.
So i simply made use of the 'onChange' event of a drop down box. I created an additional hidden field on my form.I wrote a simple javascript function that would simply set the value of the hidden field to the string-"partial Submit" and would submit my main form (say named 'form1') as :-
document.getElementById("hidden_id").setAttribute("value","partial submit");
form1.submit;
The function that does the above will be called whenever (and everytime) the onchange event of the drop down box gets fired.
When the user finally clicks on the submit button on the form to submit the finally completed form, then another javascript function is called that simply sets the value of the hidden field on the form to the string, "final submit" and would submit the form as :-
document.getElementById("hidden_id").setAttribute("value","final submit");
form1.submit;
Now on my server, i checked for the value of this hidden field as :-
if(request.getParameter("hidden_id").equals("partial Submit"))
{
// make a database connection, pass the value user selected from the drop down box
// to a prepared statement that does the query for getting the 'productName' from
// the database, collect the returned string in a variable and set a
// request attribute with this returned value. This value can simply be used in the
// jsp to fill in the value part of the textbox1.
}
else
{
if(request.getParameter("hidden_id").equals("final Submit"))
{
// do the rest of the final processing that needs to be done when user finally
// submits the completed form.
}
else
{
// throw an exception to take care of the possibility that the user might send
// in a 3rd value as a value for the hidden field.
}
}
Since you havent provided the code for selectProduct(this.value) , i presume that it submits the jsp page as when you change the value in the drop down.
If that the case in the servelt, set the value that you want to show in jsp in request object
request.setAttribute("valuetodisplay" ,valuetodisplay);
and now in jsp
<input type="text" value ='<%= request.getAttribute("valuetodisplay")%>' />
One thing I learned today is "there is no selected property in
<html:option>
like plain old option" , we can give value in
<html:select>
that matches the value against each option and if match found marks the option selected.
but I want to make multiple options pre-selected on page load(am using
<html:select multiple="true">
How can it be achieved?
Implement the following:
If possible use JavaScript to make the selected entries true for the
multiple entries u had made in that select list
Make it selected by using Java-script first by calling javascript
function before any action OR with that action :
function callSelectAll(selectName)
{
var i;
for(i=0;i<...) {
document.getElementById(selectName).options[i].selected = true;
}
}
And use String[] array name as a property name for that html:select property form bean property. And the name of that array as a property of that html:select in jsp page.
You will ultimatly gate the all selected values un the that string array of form bean.