We Keep Coding

Enabling the data from second dropdown when it selected in the first dropdown with jQuery

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>

How to retrieve values in database and show in jsp select tag when another select tag is selected?

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

Dynamically generated select tag option not filtered by jquery

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.

Which method is suitable for this scenario in Java?

Currently working on Selenium WebDriver and code had been written in Java.
The Scenario is If i select the drop down value = Month range or Date Range or Week Range then the related drop down will populate (i.e if month Range is selected the From month and To month will be populated, if Date Range is selected the From Date and To Date will be populated, if Week Range is selected the From week and To week will be populated).
What Exactly i want to check whether if the Month Range drop down value is selected in the Period drop down then verify the related drop down that is From month and To month is populating.
Please anyone can help me for this secnario.
The HTML for Period:
<select id="periodId" name="period" style="display: none;">
<option value="l4w">Last 4 Weeks</option>
<option value="l52w">Last 52 Weeks</option>
<option value="daterange">Date Range</option>
<option value="weekrange">Week Range</option>
<option selected="" value="monthrange">Month Range</option>
<option value="yeartodate">Year To Date</option>
</select>
Once the week range is selected it need to select the below The HTML for WeekRange:
<dt id="week-label">
<dd id="week-element">
<select id="fromWeekYear" style="width:60px" name="fromWeekYear">
<option value="2010"> 2010</option>
<option value="2011"> 2011</option>
<option value="2012"> 2012</option>
<option value="2013"> 2013</option>
<option selected="" value="2014"> 2014</option>
</select>
<select id="fromWeek" style="width:60px" name="fromWeek">
<option value="1"> W 1</option>
<option value="2"> W 2</option>
<option value="3"> W 3</option>
<option value="4"> W 4</option>
<option value="5"> W 5</option>
<option value="6"> W 6</option>
<option value="7"> W 7</option>
<option value="8"> W 8</option>
<option value="9"> W 9</option>
<option selected="" value="10"> W 10</option>
<option value="11"> W 11</option>
<option value="12"> W 12</option>
<option value="13"> W 13</option>
<option value="14"> W 14</option>
<option value="15"> W 15</option>
<option value="16"> W 16</option>
<option value="17"> W 17</option>
<option value="18"> W 18</option>
<option value="19"> W 19</option>
<option value="20"> W 20</option>
<option value="21"> W 21</option>
<option value="22"> W 22</option>
<option value="23"> W 23</option>
<option value="24"> W 24</option>
<option value="25"> W 25</option>
<option value="26"> W 26</option>
<option value="27"> W 27</option>
<option value="28"> W 28</option>
<option value="29"> W 29</option>
<option value="30"> W 30</option>
<option value="31"> W 31</option>
<option value="32"> W 32</option>
<option value="33"> W 33</option>
<option value="34"> W 34</option>
<option value="35"> W 35</option>
<option value="36"> W 36</option>
<option value="37"> W 37</option>
<option value="38"> W 38</option>
<option value="39"> W 39</option>
<option value="40"> W 40</option>
<option value="41"> W 41</option>
<option value="42"> W 42</option>
<option value="43"> W 43</option>
<option value="44"> W 44</option>
<option value="45"> W 45</option>
<option value="46"> W 46</option>
<option value="47"> W 47</option>
<option value="48"> W 48</option>
<option value="49"> W 49</option>
<option value="50"> W 50</option>
<option value="51"> W 51</option>
<option value="52"> W 52</option>
<option value="53"> W 53</option>
</select>
</dd>
<dd> </dd>
<dd> </dd>
Based on the Selection of the 1st filter option(i.e. WeekRange) 2nd filter (From Week to To Week is appearing as follows:

In javascript you have to write like below code.
var type = $("#periodId").val();
if(type == "weekrange"){
// then put java script to hide the related element/select boxes.
}else if(){
// then put java script to hide the related element/select boxes.
}else{
// then put java script to hide the related element/select boxes.
}

Element cannot locate with the text- selenium webdriver

Currently working on selenium webdriver and the using the language Java.
Log.info("Clicking on To weekrange dropdown");
JavascriptExecutor executor25 = (JavascriptExecutor)driver;
executor25.executeScript("document.getElementById('toWeekYear).style.display='block';");
Select select25 = new Select(driver.findElement(By.id("toWeekYear")));
select25.selectByVisibleText("2011");
JavascriptExecutor executor26 = (JavascriptExecutor)driver;
executor26.executeScript("document.getElementById('toWeekYear).style.display='block';");
Select select26 = new Select(driver.findElement(By.id(" toWeek")));
select26.selectByVisibleText(" W 5");
Thread.sleep(6000);
In the above code, am trying to select the week range and it is in the form to select year-2011 and week-W 5. This values are selecting from the dropdown. The problem is while selecting 1st dropdown it is selecting the year and while trying to select the second drop down am getting the error Cannot locate element with text: W 1
Here is the HTML tag:
<select id="fromWeekYear" style="width:60px" name="fromWeekYear">
<option value="2010"> 2010</option>
<option value="2011"> 2011</option>
<option value="2012"> 2012</option>
<option selected="" value="2013"> 2013</option>
</select>
<select id="fromWeek" style="width:60px" name="fromWeek">
<option value="1"> W 1</option>
<option value="2"> W 2</option>
<option value="3"> W 3</option>
<option value="4"> W 4</option>
<option value="5"> W 5</option>
and
<select id="toWeekYear" style="width:60px" name="toWeekYear">
<option value="2010"> 2010</option>
<option value="2011"> 2011</option>
<option value="2012"> 2012</option>
<option selected="" value="2013"> 2013</option>
</select>
<select id="toWeek" style="width:60px" name="toWeek">
<option value="1"> W 1</option>
<option value="2"> W 2</option>
<option value="3"> W 3</option>
<option value="4"> W 4</option>
<option value="5"> W 5</option>
Here is my fromweek javascript:
Log.info("Clicking on From weekrange dropdown");
JavascriptExecutor executor23 = (JavascriptExecutor)driver;
executor23.executeScript("document.getElementById('fromWeekYear').style.display='block';");
Select select23 = new Select(driver.findElement(By.id("fromWeekYear")));
select23.selectByVisibleText("2011");
JavascriptExecutor executor24 = (JavascriptExecutor)driver;
Thread.sleep(6000);
executor24.executeScript("document.getElementById('fromWeek').style.display='block';");
Select select24 = new Select(driver.findElement(By.id("fromWeek")));
select24.selectByVisibleText(" W 1");
Thread.sleep(6000);

Try this:
new Select(driver.findElement(By.id("fromWeekYear")).selectByValue("2010");
new Select(driver.findElement(By.id("toWeek")).selectByValue("1");
Value is single, use value.
If by text, your text has space:
new Select(driver.findElement(By.id("fromWeekYear")).selectByVisibleText(" 2010");
new Select(driver.findElement(By.id("toWeek")).selectByVisibleText(" W 1");
Other issue is that maybe your space is (& nbsp;)

You have some spacing issues:
driver.findElement(By.id(" toWeek")));
Should not have a space in the id:
driver.findElement(By.id("toWeek")));