I need to have multiple values selected when I call that LoadDropDown function. But its not working.... Please suggest how to get multiple options selected.
<td>Select Profession:</td>
<td>
<select name="selectcontent_profession" id="selectcontent_profession" multiple>
<option value="0">None</option>
<option value="10">Student</option>
<option value="201">Lecturer</option>
<option value="333">Head Of Department</option>
<option value="421">Principal</option>
<option value="523">Chairman</option>
<option value="667">Management</option>
<option value="784">Placement Officer</option>
</select>
</td>
<%
String s1= "10,333,421,523";
String[] array = s1.split(",");
%>
<script >
function LoadDropDown()
{
<%for(int i=0;i<array.length;i++){%>
document.getElementById("selectcontent_profession").value ="<%= array[i]%>";
<%}%>
}
</script>
First you have to declare the select's multiple selection option as follows:
<select name="selectcontent_profession" id="selectcontent_profession" multiple="multiple">
And your function should be like this:
var fld = document.getElementById('selectcontent_profession');
for(var i=0;i<fld.options.length;i++){
for(var j=0;j<array1.length;j++){
if(fld.options[i].value==array1[j])fld.options[i].selected=true;
}
}
You are trying to get the value of the dropdown whereas you have to set it to selected.
You have to add the options like
var option = document.createElement("option");
option.text = "<%= array[i]%>";
option.value = "<%= array[i]%>";
document.getElementById("selectcontent_profession").options
.add(option);
document.getElementById("selectcontent_profession").options[<%=array[i]%>].defaultSelected =true;
Use this statement in the loop.
Related
How can I write a jQuery function that enables the value from second dropdown only if a value is selected on the first dropdown?
As I selected Shiva in first drop down it should be disabled from 2nd drop down.
fist drop down value must not be equal to 2nd dropdown.
<select class="form-control" id="select2">
<option value="1556456">Shiva</option>
<option value="34234">Disha</option>
</select>
<select class="form-control" id="select3">
<option value="1556456">Shiva</option>
<option value="34234">Disha</option>
</select>
Not sure if this is what you mean. Let me know. You can use a .find and .filter on it.
$('select').on('change', function() {
$('option').prop('disabled', false);
$('select').each(function() {
var val = this.value;
$('select').not(this).find('option').filter(function() {
return this.value === val;
}).prop('disabled', true);
});
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select class="form-control" id="select2">
<option value="1556456">Shiva</option>
<option value="34234">Disha</option>
</select>
<select class="form-control" id="select2">
<option value="1556456">Shiva</option>
<option value="34234">Disha</option>
</select>
</form>
Well in the project that I am working there's a database table containing the following fields :
From the database table I want to show beds that's available in the ward that's not occupied when the ward is selected , then in bed select tag should show only available beds .
The jsp form select tag code is :
<div class="form-group">
<label for="course">Ward No:</label>
<div class="form-select">
<select name="Ward" id="course">
<option value="0">--Select Ward No---</option>
<option value="ward1">1</option>
<option value="ward2">2</option>
<option value="ward3">3</option>
<option value="ward4">4</option>
<option value="ward5">5</option>
<option value="ward6">6</option>
<option value="ward7">7</option>
<option value="ward8">8</option>
<option value="ward9">9</option>
<option value="ward10">10</option>
<option value="ward11">11</option>
<option value="ward12">12</option>
</select>
<span class="select-icon"><i class="zmdi zmdi-chevron-down"></i></span>
</div>
</div>
<div class="form-group">
<label for="bed">Bed No:</label>
<div class="form-select">
<select name="Bed" id="course">
<option value="0">--Select Ward No---</option>
<option value="bed1">1</option>
<option value="bed2">2</option>
<option value="bed3">3</option>
<option value="bed4">4</option>
<option value="bed5">5</option>
<option value="bed6">6</option>
<option value="bed">7</option>
<option value="bed8">8</option>
<option value="bed9">9</option>
<option value="bed10">10</option>
<option value="bed11">11</option>
<option value="bed12">12</option>
</select>
<span class="select-icon"><i class="zmdi zmdi-chevron-down"></i></span>
</div>
</div>
So the question is how can I do this ?
I am new java development and this is my first project , so please excuse if any silly mistakes are found.
Thank you in advance for all helping out , its much appreciated.
The simple answer to your question is AJAX
Do an AJAX call to get the available beds from DB after selecting the ward number.
Form the bed dropdown dynamically.
Example:
<select name="Ward" id="course" onChange="fetchAvailableBeds()">
......
</select>
function fetchAvailableBeds()
{
var wardNo = $("#course").val();
var queryUrl = "REST_URL";
$.ajax({
url : URL,
data : "wardNo="+wardNo,
type : "POST",
success : function(data, textStatus, jqXHR)
{
var responseJSON = jqXHR.responseText;
var responseParsedJSON = JSON.parse(responseJSON);
var bedDetails = responseParsedJSON.bedDetails;
if(bedDetails.length > 0)
{
$('#bed').empty().append('<option>--Select Bed--</option>');
for(var i=0;i<bedDetails.length;i++)
{
$('#bed').append('<option value="'+bedDetails[i].name+'">'+bedDetails[i].id+'</option>' );
}
}
else
{
$('#bed').empty().append( '<option>--No Beds Available--</option>');
}
}
});
}
After selecting the ward number you can generate the select tag as string from database using for loop and print out the result on html
I dynamically generate the select tag using jstl like below.But I am failed to select the option in jquery.
JSP:
<c:forEach var="p" items="${model.multiphase}" varStatus="row">
<select class="form-control status" name="status">
<option value="Notyetstarted">Not Yet Started</option>
<option value="Inprogress">InProgress</option>
<option value="Onhold">OnHold</option>
<option value="Closed">Closed</option>
</select>
<input type="hidden" id="upstatus_${row.index}" value="<c:out value='${p.getProjectPhase().getPhaseStatus()}'/>" />
</c:forEach>
the above jstl generates the below html
<select class="form-control status" name="status">
<option value="Notyetstarted">Not Yet Started</option>
<option value="Inprogress">InProgress</option>
<option value="Onhold">OnHold</option>
<option value="Closed">Closed</option>
</select>
<input type="hidden" id="upstatus_0" value="Closed" />
<select class="form-control status" name="status">
<option value="Notyetstarted">Not Yet Started</option>
<option value="Inprogress">InProgress</option>
<option value="Onhold">OnHold</option>
<option value="Closed">Closed</option>
</select>
<input type="hidden" id="upstatus_1" value="Onhold" />
I have used below jquery for selecting the option.
$(".status option").each(function () {
alert("fd");
$(this).find("option").filter(function () {
return $(this).val() == $("#upstatus_" + index).val();
}).prop('selected', true);
});
How to preselect the value?
Any help will be greatly Appreciated!!!
change to this:
$(".status").each(function () {
var that = $(this);
$(this).find('option').filter(function (index) {
console.log($(this).parent().next(":hidden").val());
return $(this).val() === that.next(":hidden").val()
}).prop('selected', true);
});
Sample Demo
Updated Sample Demo
-> : jquery not enters in the alert.
because you have .each() iteration on the option not on the select element.
Although you can change to this also:
$(".status").each(function (i) { // add a index "i" here
$(this).find('option').filter(function () {
return $(this).val() === $("#upstatus_"+i).val() // use that here
}).prop('selected', true);
});
Sample for this.
I am working on a jsp project where I have a dynamic selection list. The values in this list change according to the value selected in the 1st selection list.
Here's the code:
<script language="JavaScript" type="text/javascript">
function optionsChange(){
var service = document.getElementById("service").value;
if(service == 'GSM'){
document.getElementById("cdmaService").value= '';
document.getElementById("cdmaService").style.display = 'none';
document.getElementById("gsmService").style.display = 'block';
$('gsmService').attr('name', 'services');
}else if(service == 'CDMA'){
document.getElementById("gsmService").value= '';
document.getElementById("gsmService").style.display = 'none';
document.getElementById("cdmaService").style.display = 'block';
$('cdmaService').attr('name', 'services');
}
}
</script>
<select id="service" onChange="javascript:optionsChange();">
<option value="GSM">GSM</option>
<option value="CDMA">CDMA</option>
</select>
<td id="gsmService" ><select name="services" >
<option value="COMBO OFFER">COMBO OFFER</option>
<option value="CRICKET">CRICKET</option>
<option value="ASTRO">ASTRO</option>
</select>
</td>
<td id="cdmaService" style="display:none"><select name="services" >
<option value="COMBO OFFER CDMA">COMBO OFFER CDMA</option>
<option value="WIN THE DREAM">WIN THE DREAM</option>
<option value="VOICE CHAT">VOICE CHAT</option>
</select>
</td>
now when the user selects a service, lets say "GSM", and then selects a service from the second list, lets say "ASTRO". He clicks on a button which redirects him to the next page where he sees "ASTRO" printed. This works fine.
But if the user selects "CDMA" from the 1st list and then selects, let's say "VOICE CHAT" from the second list. It still prints "ASTRO" on the next page. IT should print "VOICE CHAT".
this is the method to submit form:
<script language=javascript>
function submitForm(actionStr)
{
if(actionStr=="User Details")
{
document.login.action="showUsrDetail.jsp";
document.login.submit();
}
}
this is the code for the button:
<input type="button" value="User Details" onclick="submitForm(this.value);"/>
then it redirects to the page ""showUsrDetail.jsp". And when it does the name of the service is printed on the console. For which the code is:
<%
String service = request.getParameter("services");
System.out.println("Value Added Service selected is ="+service);
%>
if i change the first selection to CDMA and then select any service from the second selection list, it still prints the Service which is under GSM.
Can somebody please help me out?
You can write a javascript function to get the selected value instead of getting the same from servlet. Put the Javascript function in script tab with language as JavaScript.
function JSGetSelectedItem() {
var dropdownIndex = document.getElementById('service').selectedIndex;
var dropdownValue = document.getElementById('service')[dropdownIndex].text;
}
<select id="service" onChange="JSGetSelectedItem()">
<option value="GSM">GSM</option>
<option value="CDMA">CDMA</option>
</select>
I am stuck in one logic, where I have to verify if the options in dropdown are displaying twice. I searched in google for the solution, but didnt find any.
I have this code to get all the options from the dropdown. But not really sure how should I check if the options are displayed twice.
new Select(driver.findElement(By.xpath(//*[#id='unmappedTech']))).selectByVisibleText(VisibleText);
new Select(driver.findElement(By.xpath(//*[#id='unmappedTech']))).getOptions();
In my application, options are displaying twice in dropdown. Here is the source code of dropdown:
<table><tbody><tr>
<td>
<select name="unmappedTech" id="unmappedTech" multiple="multiple" size="10" style="width: 160px;">
<option class=" firepath-matching-node" value="142">Cloud Service Assurance</option>
<option value="123">Cloud Service Assurance Zenoss for Data Center and Cloud</option>
<option value="6">CUSTOMER COLLABORATION</option>
<option value="12">DESKTOP VIRTUALIZATION</option>
<option value="13">FACILITIES</option>
<option value="7">INSTANT MESSAGING</option>
<option value="8">MOBILE COLLABORATION</option>
<option value="141">Network Address Translation</option>
<option value="15">NETWORKING</option>
<option value="3">SECURITY</option>
<option value="16">STORAGE</option>
<option value="81">TestTechnology_Dont_Delete</option>
<option value="10">UNIFIED COMMUNICATIONS</option>
<option value="20">VCH VIDEO</option>
<option value="17">VIRTUALIZATION And CONSOLIDATION</option>
<option value="21">VtechnologyVtechnologyVtechnologyVtechnology</option>
<option value="2">WIRELESS</option>
<option class=" firepath-matching-node" value="142">Cloud Service Assurance</option>
<option value="123">Cloud Service Assurance Zenoss for Data Center and Cloud</option>
<option value="6">CUSTOMER COLLABORATION</option>
<option value="12">DESKTOP VIRTUALIZATION</option>
<option value="13">FACILITIES</option>
<option value="7">INSTANT MESSAGING</option>
<option value="8">MOBILE COLLABORATION</option>
<option value="141">Network Address Translation</option>
<option value="15">NETWORKING</option>
<option value="3">SECURITY</option>
<option value="16">STORAGE</option>
<option value="81">TestTechnology_Dont_Delete</option>
<option value="10">UNIFIED COMMUNICATIONS</option>
<option value="20">VCH VIDEO</option>
<option value="17">VIRTUALIZATION And CONSOLIDATION</option>
<option value="21">VtechnologyVtechnologyVtechnologyVtechnology</option>
<option value="2">WIRELESS</option>
</select>
</td>
I am not a Java person, so forgive me, but you are essentially just wanting to loop through all the options from that Select, keep a record of them, and ensure that one each loop iteration, that option doesn't already exist, so pseudo-code:
Select selectElement = new Select(driver.findElement(By.xpath(//*[#id='unmappedTech'])));
ArrayList<string> options = new ArrayList<string>();
for (WebElement element in selectElement.getOptions()) {
if (options.contains(element.getText())) {
// do something that lets the test fail because the option is listed twice
}
options.add(element.getText());
}
This isn't a Selenium problem as such, it's just comparing a list to see if something is already contained within that list.
This is the java code. Essentially checking whether duplicate is found by rechecking a set.
List<WebElement> options = driver.findElement(
By.xpath("//*[#id='unmappedTech']")).findElements(
By.tagName("option"));
HashSet<String> optionNames = new HashSet<>();
for (WebElement option : options) {
if (optionNames.contains(option.getText()))
System.out.println("Duplicate found");
else
optionNames.add(option.getText());
}
Select s = new Select(driver.findElement(
By.xpath("//Select[#id='unmappedTech']")));
List<WebElement> list = s.getOptions();
Set<String> listNames = new HashSet<String>(list.size());
for (WebElement element : list) {
//Set will not allow to add duplicate value
if(listNames.add(element.getText())==false){
System.out.println("Duplicate value is: "+element.getText());
}
}